# UI\_template & changing button background colour on click

**URL:** <https://discourse.nodered.org/t/ui-template-changing-button-background-colour-on-click/19498>\
**Category:** Dashboard\
**Created:** [23 December 2019 11:05 UTC](https://discourse.nodered.org/t/ui-template-changing-button-background-colour-on-click/19498 "2019-12-23T11:05:46Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![dr\_cave\_dweller](https://avatars.discourse-cdn.com/v4/letter/d/71e660/32.png) [@dr\_cave\_dweller](https://discourse.nodered.org/u/dr_cave_dweller)\
**Post date:** [23 December 2019 11:05 UTC](https://discourse.nodered.org/t/ui-template-changing-button-background-colour-on-click/19498/1 "2019-12-23T11:05:46Z")

</div>

Hi all, I am trying to make a button change color and output a corresponding variable when clicked. It is required to stay this colour until it is clicked again, then it is to change back.

I am using the UI\_template nodes as they have been more flexible. So I am trying to figure out how to pass CSS styling to the button after it has been clicked, and then retain the settings until next time it is clicked.

Does anyone have any ideas on how to achieve this? Not sure if this is possible. Thanks

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [23 December 2019 11:19 UTC](https://discourse.nodered.org/t/ui-template-changing-button-background-colour-on-click/19498/2 "2019-12-23T11:19:28Z")

</div>

Did you search the forum? I thought I'd seen something like this in the last couple of days.

found it: take a read of this [A little bit of a flow that others may like](https://discourse.nodered.org/t/a-little-bit-of-a-flow-that-others-may-like/372/41)  
If might help you

---

<div class="post-metadata">

**Author:** ![dr\_cave\_dweller](https://avatars.discourse-cdn.com/v4/letter/d/71e660/32.png) [@dr\_cave\_dweller](https://discourse.nodered.org/u/dr_cave_dweller)\
**Post date:** [23 December 2019 17:54 UTC](https://discourse.nodered.org/t/ui-template-changing-button-background-colour-on-click/19498/3 "2019-12-23T17:54:36Z")

</div>

Thanks for taking time to answer.

Yes I have searched this forum high and low but, just like the link you posted, in all the cases posted (that I could find) people are using the inbuilt button or inbuilt switch nodes. You just need to feed in the color in a msg which seems is fairly straight forward.

I would prefer to use the UI\_template node as this is what I have used for buttons on other pages, Any ideas of doing it this way? Thanks

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [23 December 2019 19:59 UTC](https://discourse.nodered.org/t/ui-template-changing-button-background-colour-on-click/19498/4 "2019-12-23T19:59:33Z")

</div>

Excuse my curiosity but can you explain the flexibility issue you are trying to resolve with using template instead of ready made button node. What is the goal you are targeted on?

---

<div class="post-metadata">

**Author:** ![dr\_cave\_dweller](https://avatars.discourse-cdn.com/v4/letter/d/71e660/32.png) [@dr\_cave\_dweller](https://discourse.nodered.org/u/dr_cave_dweller)\
**Post date:** [23 December 2019 22:00 UTC](https://discourse.nodered.org/t/ui-template-changing-button-background-colour-on-click/19498/5 "2019-12-23T22:00:54Z")

</div>

**Excuse my curiosity but can you explain the flexibility issue you are trying to resolve with using template instead of ready made button node.**

Sure, using class / css functions I can get detailed control of

> putting an image inside the button  
> background color  
> border on/off  
> border color  
> border size  
> border radius  
> text color  
> text size  
> text font  
> printing combinations of text and msg data within the button

I dont think I can do that with the inbuilt buttons and switches?

**What is the goal you are targeted on?**

Sure. I need to build a scheduling interface on the webpage that can be interacted on by the user. All the scheduling systems I have seen require the user to log into the node-red webpage to change it. I dont want that. I want to make it easy for the user so needs to be thrugh the web interface.

> I have a 24hr / 7 day week schedule in 30min blocks  
> On the interface, each 30 min block is actually a button that the user can interact with on the touchscreen  
> Selecting the 30min block changes the buttons color and sends out a message with the setting

So......... if the schedule says on from 03:00 to 05:00 then the 4 buttons making up that time block (4 buttons representing 30min time blocks) will all be the same color. In picture below they are shown blue (I have hard coded them blue for visual representation). I have pushed all the buttons together with no borders and no gaps so I have the look correct but I need to change the color and send a message on button press.

The intention is the user would just swipe their finger left or right over the buttons and it will look and feel like they are selecting blocks of time.

 ![schedule](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/a/a201afc25633d685f9851c17d953fb601aed7134.jpeg)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [23 December 2019 22:17 UTC](https://discourse.nodered.org/t/ui-template-changing-button-background-colour-on-click/19498/6 "2019-12-23T22:17:00Z")

</div>

Thak you. Seems like far from basics. If not only the buttons, have you looked over [https://flows.nodered.org/node/node-red-contrib-uibuilder](https://flows.nodered.org/node/node-red-contrib-uibuilder) I think you'll get much more freedom with it and seems to me you'll need it.