# Button colours and animations not working

**URL:** https://discourse.nodered.org/t/button-colours-and-animations-not-working/46681
**Category:** Dashboard
**Created:** [4 June 2021 02:45 UTC](https://discourse.nodered.org/t/button-colours-and-animations-not-working/46681 "2021-06-04T02:45:12Z")
**Posts on this page:** 2
**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: [4 June 2021 02:45 UTC](https://discourse.nodered.org/t/button-colours-and-animations-not-working/46681/1 "2021-06-04T02:45:12Z")

</div>

I have this on a few machines.

I press a button to allow ONE message to pass.

I press the button and I get a spinning icon.

(See picture.)

 ![Screenshot from 2021-06-04 12-38-47](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/0/f09ce7084197044a99d3269c1b93878420ce0993.png)

This is the code:

```auto
[{"id":"5730058.37277fc","type":"function","z":"aa48e352.9ad2f8","name":"One only.","func":"if (msg.topic == \"GATE\")\n{\n context.set(\"ALLOW\",1);\n node.status({fill: \"green\",text:\"ONE\"});\n return;\n}\nif (context.get(\"ALLOW\") == 1)\n{\n //\n context.set(\"ALLOW\",0);\n node.status({});\n return msg;\n}","outputs":1,"noerr":0,"x":1040,"y":640,"wires":[["f07989c9.0bbec8","20e1ab25.801e34"]]},{"id":"9e939478.0450f8","type":"ui_button","z":"aa48e352.9ad2f8","name":"One only","group":"bac7ba06.8fc4","order":8,"width":"1","height":"1","passthru":false,"label":"{{msg.icon}}","tooltip":"","color":"black","bgcolor":"{{msg.colour}}","icon":"","payload":"open","payloadType":"str","topic":"GATE","x":1040,"y":680,"wires":[["5730058.37277fc","7820a2ec.4b053c"]]},{"id":"20e1ab25.801e34","type":"change","z":"aa48e352.9ad2f8","name":"done","rules":[{"t":"set","p":"colour","pt":"msg","to":"maroon","tot":"str"},{"t":"set","p":"icon","pt":"msg","to":"<i class=\"material-icons\"> repeat_one </i>","tot":"str"},{"t":"delete","p":"payload","pt":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":1200,"y":680,"wires":[["9e939478.0450f8"]]},{"id":"7820a2ec.4b053c","type":"change","z":"aa48e352.9ad2f8","name":"pressed","rules":[{"t":"set","p":"colour","pt":"msg","to":"white","tot":"str"},{"t":"set","p":"icon","pt":"msg","to":"<i class=\"fa fa-refresh fa-spin fa-2x\"></i>","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":1040,"y":720,"wires":[["9e939478.0450f8"]]},{"id":"bac7ba06.8fc4","type":"ui_group","name":"BedPi Machine health","tab":"50f4e688.7d4b7","order":1,"disp":true,"width":"9","collapse":false},{"id":"50f4e688.7d4b7","type":"ui_tab","name":"Machine health","icon":"fa-heartbeat","order":6,"disabled":false,"hidden":false}]

```

When a message passes, it stops spinning and puts another icon there.

On another machine I get a white box.

But if I change the code to make the background `green` it works, but the icons is WHITE - where as in the example shown, it is back.

Here is the code form the second machine where it is not visible as the icon is white.

```auto
[{"id":"2c6e094d.c2dff6","type":"ui_button","z":"d29f28a7.551f88","name":"One only","group":"7882112d.e71858","order":8,"width":"1","height":"1","passthru":false,"label":"{{msg.icon}}","tooltip":"","color":"black","bgcolor":"{{msg.colour}}","icon":"","payload":"open","payloadType":"str","topic":"GATE","x":780,"y":680,"wires":[["b3a50616.fd7af8"]]},{"id":"3693a078.0f79e8","type":"change","z":"d29f28a7.551f88","name":"done","rules":[{"t":"set","p":"colour","pt":"msg","to":"maroon","tot":"str"},{"t":"set","p":"icon","pt":"msg","to":"<i class=\"material-icons\"> repeat_one </i>","tot":"str"},{"t":"delete","p":"payload","pt":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":940,"y":680,"wires":[["2c6e094d.c2dff6"]]},{"id":"b3a50616.fd7af8","type":"change","z":"d29f28a7.551f88","name":"pressed","rules":[{"t":"set","p":"colour","pt":"msg","to":"green","tot":"str"},{"t":"set","p":"icon","pt":"msg","to":"<i class=\"fa fa-refresh fa-spin fa-2x\"></i>","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":780,"y":720,"wires":[["2c6e094d.c2dff6"]]},{"id":"7882112d.e71858","type":"ui_group","name":"TelePi Machine health","tab":"11d11c61.3403dc","order":1,"disp":true,"width":"9","collapse":false},{"id":"11d11c61.3403dc","type":"ui_tab","name":"Machine health","icon":"fa-heartbeat","order":5,"disabled":false,"hidden":false}]

```

What am I missing?

---

<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: [4 July 2021 02:45 UTC](https://discourse.nodered.org/t/button-colours-and-animations-not-working/46681/2 "2021-07-04T02:45:59Z")

</div>

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