# How to change button background color temporarily onclick

**URL:** <https://discourse.nodered.org/t/how-to-change-button-background-color-temporarily-onclick/61364>\
**Category:** Dashboard\
**Created:** [16 April 2022 09:44 UTC](https://discourse.nodered.org/t/how-to-change-button-background-color-temporarily-onclick/61364 "2022-04-16T09:44:23Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![gschmidt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gschmidt/32/60349_2.png) [@gschmidt](https://discourse.nodered.org/u/gschmidt)\
**Post date:** [16 April 2022 09:44 UTC](https://discourse.nodered.org/t/how-to-change-button-background-color-temporarily-onclick/61364/1 "2022-04-16T09:44:23Z")

</div>

Hi,

On my dashboard I have a button which confirms a selected time of a time input widget  
How can I change the background color, after the confirmation (onclick), for a given period and then go back to the initial background color?

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [16 April 2022 10:03 UTC](https://discourse.nodered.org/t/how-to-change-button-background-color-temporarily-onclick/61364/2 "2022-04-16T10:03:06Z")

</div>

you could attach a trgger node.  
eg.

```auto
[{"id":"3b6120fe.503528","type":"inject","z":"84b6531c.4e773","name":"","props":[{"p":"background","v":"green","vt":"str"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":450,"y":120,"wires":[["ba040ee4.a8d0c"]]},{"id":"ba040ee4.a8d0c","type":"ui_button","z":"84b6531c.4e773","name":"","group":"2d4fe667.28f8ba","order":16,"width":0,"height":0,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"{{background}}","className":"","icon":"","payload":"1","payloadType":"str","topic":"topic","topicType":"msg","x":610,"y":120,"wires":[["9142fd98.891598","ebb5c8e.2b53538"]]},{"id":"15f8a7f.c025758","type":"change","z":"84b6531c.4e773","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"background","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":670,"y":180,"wires":[["ba040ee4.a8d0c"]]},{"id":"9142fd98.891598","type":"trigger","z":"84b6531c.4e773","name":"","op1":"red","op2":"green","op1type":"str","op2type":"str","duration":"1","extend":false,"overrideDelay":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":470,"y":180,"wires":[["15f8a7f.c025758"]]},{"id":"ebb5c8e.2b53538","type":"debug","z":"84b6531c.4e773","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":860,"y":80,"wires":[]},{"id":"2d4fe667.28f8ba","type":"ui_group","name":"demo","tab":"1caa8458.b17814","order":1,"disp":true,"width":"12","collapse":false},{"id":"1caa8458.b17814","type":"ui_tab","name":"Demo","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![gschmidt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gschmidt/32/60349_2.png) [@gschmidt](https://discourse.nodered.org/u/gschmidt)\
**Post date:** [16 April 2022 10:43 UTC](https://discourse.nodered.org/t/how-to-change-button-background-color-temporarily-onclick/61364/3 "2022-04-16T10:43:50Z")

</div>

> [@E1cid](#):
>
> you could attach a trgger node.  
> eg.
> 
> ```auto
> [{"id":"3b6120fe.503528","type":"inject","z":"84b6531c.4e773","name":"","props":[{"
> 
> ```

Thanx man! working

---

<div class="post-metadata">

**Author:** ![gschmidt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gschmidt/32/60349_2.png) [@gschmidt](https://discourse.nodered.org/u/gschmidt)\
**Post date:** [17 April 2022 07:54 UTC](https://discourse.nodered.org/t/how-to-change-button-background-color-temporarily-onclick/61364/5 "2022-04-17T07:54:02Z")

</div>

Is this also possible in css code in my template node?  
This will save me 14 extra widgets in my flow

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [17 April 2022 08:45 UTC](https://discourse.nodered.org/t/how-to-change-button-background-color-temporarily-onclick/61364/6 "2022-04-17T08:45:57Z")

</div>

Yes it is possible, if you give each button a optional class, you could then target that class in your css some examples [here](https://www.google.com/search?q=css+onclick+change+bacground+color+of+button&client=ms-unknown&sxsrf=APq-WBsUbVK4Jl5yWQYK3w7U_PbUNJQ73w%3A1650184892778&ei=vNJbYuD9LsCG9u8Pv-OW0AM&oq=css+onclick+change+bacground+color+of+button&gs_lcp=ChNtb2JpbGUtZ3dzLXdpei1zZXJwEAMyCgghEBYQChAdEB4yCgghEBYQChAdEB4yCgghEBYQChAdEB46BwgAEEcQsAM6BggAEBYQHjoICAAQCBANEB46BwghEAoQoAE6BgghEAoQFUoECEEYAFD3Dli7IGDLI2gBcAB4AIAB1gGIAYoKkgEFMC45LjGYAQCgAQHIAQjAAQE&sclient=mobile-gws-wiz-serp)

---

<div class="post-metadata">

**Author:** ![gschmidt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gschmidt/32/60349_2.png) [@gschmidt](https://discourse.nodered.org/u/gschmidt)\
**Post date:** [19 April 2022 21:07 UTC](https://discourse.nodered.org/t/how-to-change-button-background-color-temporarily-onclick/61364/7 "2022-04-19T21:07:52Z")

</div>

Thanx, found it!