How To Modify Dashboard Button To Alternate Color / Text?

I have a push button that I would like to modify so it will alternate text and color with each press. Such as text ON with red background and OFF with green background. And naturally send the appropriate payload. Currently the button just sends a "lights on" payload with each press. Hopefully my first attempt at inserting first the CSS code then the button code will work?

CSS

<style>
  .filled { 
      height: 100% !important;

      padding: 0 !important;
      margin: 0 !important;
  }
  .nr-dashboard-template {
      padding: 0;
      margin: 0;
  }
  
  .rounded {
  border-radius: 12px 12px 12px 12px;
}
 
   .bigfont {
  font-size: 18px;
}

   .smallfont {
  font-size: 12px;
}
  
</style>

<script>
$('.vibrate').on('click', function() {
  navigator.vibrate(100);
});

function restore_bg(x) {
            $(this).css("background-color", x);
    };

$('.touched').on('mousedown', function() {
    
    var x= $(this).css("background-color");
    $(this).css("background-color", "yellow");
    
    setTimeout(restore_bg.bind(this,x),100);
    navigator.vibrate(80);
    });
    
</script>

Button

<md-button class="vibrate filled touched bigfont rounded" style="background-color:#ff0000" ng-click="send({payload: 'lights on'})"> 
    lights<br/>on
</md-button> 


Not sure if this will help, but I did something like this:

<div ng-if="msg.payload == 1" class="switch"><div class="labelon">Zone 2 Power</div><div class="securitytexton" ng-bind-html="msg.change"></div></div>
<div ng-if="msg.payload == 0" class="switch"><div class="labeloff">Zone 2 Power</div><div class="securitytextoff" ng-bind-html="msg.change"></div></div>

The securitytexton/off and labelon/off is set to switch between white and yellow (text/label). (The msg.change I use with a timestamp for when the state has changed)

chucksteele, this would be a way to change the label and name of a button from an outside payload. But I wanted to change it when the button was pushed. Maybe seeing your flow would clarify?

I am no expert at Node-Red, but this is what I do.

You will need to understand how the flow.get flow.set scope context works. I use it to record the current status of the button.

https://nodered.org/docs/user-guide/writing-functions

[{"id":"485ef26f.0e7fe4","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"111148ee.cdb697","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false},{"id":"31529018.f1ea8","type":"ui_group","z":"","name":"Default","tab":"111148ee.cdb697","disp":true,"width":"6","collapse":false},{"id":"d93e5115.fae8a","type":"function","z":"485ef26f.0e7fe4","name":"Button_colors","func":"var x = flow.get(\"button_state\"); //use a global variable to record button state, get the last state\nmsg1={};    //if you use msg.payload you seem to get errors as it contains data already, so set up a new msg1.payload message\n\nif (x===0){\n    msg1.payload = \"background-color: red; color: black\"    //background and text colors\n    flow.set(\"button_state\",1)    //if previous state was 0, now make it 1\n}\nelse {\n    msg1.payload = \"background-color: green; color: white\"  //background and text colors\n    flow.set(\"button_state\",0)    //if previous state was 1, now make it 0\n}\nreturn msg1;","outputs":1,"noerr":0,"x":580,"y":120,"wires":[["ab2af49c.6bbd98","2bd7b2ff.b539ce"]]},{"id":"ab2af49c.6bbd98","type":"ui_template","z":"485ef26f.0e7fe4","group":"31529018.f1ea8","name":"Button","order":0,"width":0,"height":0,"format":"<md-button\n    style = {{msg.payload}}\n    ng-click=\"send(1)\">\n    button\n</md-button>","storeOutMessages":true,"fwdInMessages":false,"templateScope":"local","x":770,"y":120,"wires":[["5b529bb9.5a1c74","d93e5115.fae8a","613f5ec8.3fda88"]]},{"id":"118e5a46.c3d0e6","type":"inject","z":"485ef26f.0e7fe4","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":"1","x":150,"y":120,"wires":[["63dd9b08.2e4b44"]]},{"id":"63dd9b08.2e4b44","type":"function","z":"485ef26f.0e7fe4","name":"Set_initial_state","func":"flow.set(\"button_state\",0)\nreturn msg;","outputs":1,"noerr":0,"x":360,"y":120,"wires":[["d93e5115.fae8a"]]},{"id":"5b529bb9.5a1c74","type":"function","z":"485ef26f.0e7fe4","name":"Do_something_else","func":"","outputs":1,"noerr":0,"x":1000,"y":120,"wires":[[]]},{"id":"2bd7b2ff.b539ce","type":"debug","z":"485ef26f.0e7fe4","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":690,"y":220,"wires":[]},{"id":"613f5ec8.3fda88","type":"debug","z":"485ef26f.0e7fe4","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":900,"y":220,"wires":[]},{"id":"b7ee63d5.65ef48","type":"comment","z":"485ef26f.0e7fe4","name":"Required to start flow and set initial button condition","info":"","x":250,"y":80,"wires":[]}]