# Button colour (using TEMPLATE node) help - the next stage

**URL:** <https://discourse.nodered.org/t/button-colour-using-template-node-help-the-next-stage/24625>\
**Category:** Dashboard\
**Created:** [11 April 2020 00:18 UTC](https://discourse.nodered.org/t/button-colour-using-template-node-help-the-next-stage/24625 "2020-04-11T00:18:27Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [11 April 2020 00:18 UTC](https://discourse.nodered.org/t/button-colour-using-template-node-help-the-next-stage/24625/1 "2020-04-11T00:18:27Z")

</div>

The question I asked yesterday has been resolved.  
Again: Thanks to all who replied.

Now I am getting _greedy_ with what I am wanting buttons (`template` node) to do.

This is from the `template` node now:

```auto
<md-button class="vibrate filled touched bigfont rounded" style="color: red; background-color:#000000" ng-click="send({payload: 'dummy_payload'})">
       <i class="material-icons"> pause / play_arrow</i>
</md-button> 

```

Really nice.

I get a button looking like this:

![Screenshot from 2020-04-11 10-11-49](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/b/0b522c8f9d9d019033dce507e5c6f5b7d1a3385d.png)

Which is great - learning from yesterday's question.  
(I'll be honest here. I do not really understand how I got this working.  
I used this site:  
[buttons](https://material.angularjs.org/1.1.3/CSS/button)  
to help me get here. Now I'm stuck again)

There are 3 things in that button.  
1 - the _pause_ icon.  
2 - the `/`.  
3 - the _play_ icon.

Now, I'm wanting to be greedy and set the colours from outside.  
Not the colour for all, but individual colours.

Why?  
This is a two function button. (Kinda obvious)  
Press one time it pauses playback.  
Press it another time and it pauses playback.

I'm wanting the colour of the icons to reflect the _mode_.

Help.

P.S.  
yes, I am out of my depth.  
I don't understand it completely.  
Looking at the site I mentioned above it is _for a whole other set of buttons_ as I can see/make. But it is suffice to help me kind of get the structure. KINDA!

Yes, "RTFM" etc. Doesn't work for me. Don't know why.  
I'm looking. It doesn't make sense.  
Thus I am asking.

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [11 April 2020 06:20 UTC](https://discourse.nodered.org/t/button-colour-using-template-node-help-the-next-stage/24625/2 "2020-04-11T06:20:15Z")

</div>

I am no dashboard/template expert, but it needs to be solved with `ng-style`

Working example:

```auto
[{"id":"d974e2d9.258078","type":"ui_template","z":"498e30f7.ac45c8","group":"7a5d5f88.d2ba6","name":"","order":0,"width":0,"height":0,"format":"<md-button class=\"vibrate filled touched bigfont rounded\" style=\"background-color:#000000\" ng-click=\"send({payload: 'dummy_payload'})\">\n <i class=\"material-icons\">\n <span style=\"color:{{msg.payload.pause}}\">pause</span> / <span style=\"color:{{msg.payload.play}}\">play_arrow</span>\n </i>\n</md-button> ","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":540,"y":504,"wires":[[]]},{"id":"13e70ce8.21bc33","type":"inject","z":"498e30f7.ac45c8","name":"{\"play\":\"#ff9900\",\"pause\":\"#00ff33\"}","topic":"","payload":"{\"play\":\"#ff9900\",\"pause\":\"#00ff33\"}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":260,"y":480,"wires":[["d974e2d9.258078"]]},{"id":"dc7352c1.22d55","type":"inject","z":"498e30f7.ac45c8","name":"{\"play\":\"#ffffff\",\"pause\":\"ffffff\"}","topic":"","payload":"{\"play\":\"#ffffff\",\"pause\":\"ffffff\"}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":288,"y":528,"wires":[["d974e2d9.258078"]]},{"id":"7a5d5f88.d2ba6","type":"ui_group","z":"","name":"button","tab":"883914f8.c9986","order":1,"disp":true,"width":"6","collapse":false},{"id":"883914f8.c9986","type":"ui_tab","z":"","name":"test","icon":"dashboard","disabled":false,"hidden":false}]

```

With `msg.payload.play` and `msg.payload.pause` you can set the color attributes.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [11 April 2020 06:25 UTC](https://discourse.nodered.org/t/button-colour-using-template-node-help-the-next-stage/24625/3 "2020-04-11T06:25:54Z")

</div>

Love you!

😉

Thanks.

I'll run away and play with it.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [25 April 2020 06:25 UTC](https://discourse.nodered.org/t/button-colour-using-template-node-help-the-next-stage/24625/4 "2020-04-25T06:25:59Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.