Apply CSS style to a working RAW string button

[tomadoggy]

I have working CSS styles for my webpage buttons:

            // CSS styles buttons
            client.println("<style>");
            client.println("button { background-color: #195B6A; border: none; color: white; padding: 16px 40px; text-align: center; text-decoration: none; display: inline-block; font-size: 30px; margin: 2px; cursor: pointer; box-shadow: 10px 10px 23px -1px rgba(0,0,0,0.66); transition-duration: 0.4s; }");
            client.println("button:hover { box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4); }");
            client.println("button:active { background-color: #3e8e41; box-shadow: 0 5px #666; transform: translateY(4px); }");
            client.println("</style>");

Which allows the button to appear like this:

From this client.println:

client.println("<button>Click Me!</button>");

I have this other working button that calls my function inside my sketch in RAW

// Use raw string to easily include double-quote in HTML
client.println(R"~(<input type="button" value="Dump2" onclick="fetch('/rotate')">)~");  // This works but button not css styled

I have tried >40 different means to get my CSS styles applied to this RAW button but am unable to figure it out. Any guidance greatly appreciated!!

[kenb4]

The fact that it is a raw string in the source code only matters to the C++ compiler. Long before it gets to the browser, that detail is lost.

The key term to search for is selector: e.g. "css selector input type button". See also

<button> vs. <input type="button"> -- which to use?

Note how the answers have changed over the last 16 years.

[tomadoggy]

@kenb4

css selector input type button

Again...Thank you for the education. Makes so much sense now and quite an easy fix.

client.println("<style>");
client.println("input[type=button] { background-color: #195B6A; border: none; color: white; padding: 16px 40px; text-align: center; text-decoration: none; display: inline-block; font-size: 30px; margin: 2px; cursor: pointer; box-shadow: 10px 10px 23px -1px rgba(0,0,0,0.66); transition-duration: 0.4s; }");
client.println("input[type=button]:hover { box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4); }");
client.println("input[type=button]:active { background-color: #3e8e41; box-shadow: 0 5px #666; transform: translateY(4px); }");
client.println("</style>");