# Can the ui\_button be modify with CSS

**URL:** <https://discourse.nodered.org/t/can-the-ui-button-be-modify-with-css/1708>\
**Category:** Dashboard\
**Created:** [20 July 2018 00:43 UTC](https://discourse.nodered.org/t/can-the-ui-button-be-modify-with-css/1708 "2018-07-20T00:43:59Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Unpuertomex](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/unpuertomex/32/655_2.png) [@Unpuertomex](https://discourse.nodered.org/u/Unpuertomex)\
**Post date:** [20 July 2018 00:43 UTC](https://discourse.nodered.org/t/can-the-ui-button-be-modify-with-css/1708/1 "2018-07-20T00:43:59Z")

</div>

First, thanks everyone who has provided me help/guidance while I learn Node-Red.

My project has been to develop an alarm panel, so far I've been able to set the cards transparency, add shadow to the text, add an animated gradient background, change the weather icon based on weather conditions, and several other embellishments.

One thing I haven't been able to do is to modify each ui\_button, I figured out how to change them all at once by modifying nr-dashboard-button, but it affects all the buttons on all of the tabs. I looked at the source for an ID but I couldn't see how to identify which button was which, hence my question, can the ui\_button be modified with css or do I have to create my own?

Thanks in advance!

 ![Node-Red%20Animated%20Alarm](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/1/1ec6e66ea7604074d4efd8b558a651bd4569f9be.gif)

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [20 July 2018 06:39 UTC](https://discourse.nodered.org/t/can-the-ui-button-be-modify-with-css/1708/2 "2018-07-20T06:39:02Z")

</div>

As per the info panel on the right  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/d/dec4a3f55858e3879b97debfd3ad7eafce285a6c.png)

---

<div class="post-metadata">

**Author:** ![Unpuertomex](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/unpuertomex/32/655_2.png) [@Unpuertomex](https://discourse.nodered.org/u/Unpuertomex)\
**Post date:** [20 July 2018 20:58 UTC](https://discourse.nodered.org/t/can-the-ui-button-be-modify-with-css/1708/3 "2018-07-20T20:58:11Z")

</div>

Thank you @dceejay, I did read that on the sidebar, but I'm not looking to change the background color, I'm looking to modify the button itself. For example using the ui\_template I was able to add a shadow to the buttons, unfortunately, the only way I found to do that is to using nr-dashboard-button but it modifies every button not just one, I did insert the same into the background section but that didn't work.

![snip_20180720154245](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/f/f6f7cdc9fa40a2a35267ad531fc383b1163f534b.png)

---

<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:** [20 July 2018 22:22 UTC](https://discourse.nodered.org/t/can-the-ui-button-be-modify-with-css/1708/4 "2018-07-20T22:22:32Z")

</div>

If you are using the ui\_template and building your buttons there, why not try giving each one a unique 'id' or 'class'?  
\<md-button class="mybutton1 md-raised btn" .....  
\<md-button class="mybutton2 md-raised btn" .....

then you could use css like:  
md-button.mybutton1 {background-color: red;}  
md-button.mybutton2 {background-color: blue;}

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [20 July 2018 22:41 UTC](https://discourse.nodered.org/t/can-the-ui-button-be-modify-with-css/1708/5 "2018-07-20T22:41:40Z")

</div>

Msg.background is just an example. You can use msg.foo if you like. You can set the colour of both the text and the button.  
But yes if you want fully custom then you will need to use a template.  
If you search Pete Scargills blog he had a great post (or 2) or custom buttons

---

<div class="post-metadata">

**Author:** ![Unpuertomex](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/unpuertomex/32/655_2.png) [@Unpuertomex](https://discourse.nodered.org/u/Unpuertomex)\
**Post date:** [20 July 2018 23:00 UTC](https://discourse.nodered.org/t/can-the-ui-button-be-modify-with-css/1708/6 "2018-07-20T23:00:48Z")

</div>

@zenofmud / @dceejay, thank you both for your comments. Based on the information you both provided, I'm going to need to create my own buttons. Heading to Pete Scargills blog to read up on customer buttons.