I am fairly new to arduino and ESP though am very familiar with css and javascript.

I have an esp webserver that includes a button

client.print("<button style='background-color: #F30C0C; color:#000;'></button>");

but need it to change the css backbround-color when pin is reading HIGH

 if (c == '\n') {
          currentLineIsBlank = true;
          buffer = "";
        else if (c == '\r') {
          if (buffer.indexOf("GET /?relay1") >= 0)
            relayPIN1read = digitalRead(relayPIN1);

          if (relayPIN1read == HIGH) {
            digitalWrite(relayPIN1, LOW);
          if (relayPIN1read == LOW) {
            digitalWrite(relayPIN1, HIGH);

Does any one know of any way to do this?


First print everything up to the colour. Then print the colour, which you change depending on the state of the pin. Then print the rest.

client.print("<button style='background-color: ");

if (digitalRead(PIN) == HIGH) {
} else {

client.print("; color:#000;'></button>");
| improve this answer | |
  • I did try that, but seamed to go HIGH and LOW as if it was in a 2 count loop.. but will give it another go... Thank you – Ben Jun 12 '19 at 11:03
  • @Ben You are sending a "toggle" command rather than a "set" or "reset" command. You should separate it out and use a similar system as the colour to change the command the button sends. – Majenko Jun 12 '19 at 11:07
  • dont know what i was going last time.. but that worked like a charm.. thanks very much for your time :) – Ben Jun 12 '19 at 11:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.