# Gradient Button Style

**URL:** <https://discourse.nodered.org/t/gradient-button-style/47616>\
**Category:** Dashboard\
**Created:** [25 June 2021 02:51 UTC](https://discourse.nodered.org/t/gradient-button-style/47616 "2021-06-25T02:51:32Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![DrdP](https://avatars.discourse-cdn.com/v4/letter/d/b5ac83/32.png) [@DrdP](https://discourse.nodered.org/u/DrdP)\
**Post date:** [25 June 2021 02:51 UTC](https://discourse.nodered.org/t/gradient-button-style/47616/1 "2021-06-25T02:51:32Z")

</div>

I am trying to get the buttons to have a 3D look with a gradient. I have inserted this into the button CSS section but it has no effect. Is there something missing here? I got this from CSS schools website.

```auto
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-image: linear-gradient(to top, rgba(255,0,0,1),rgba(255,0,0,0), rgba(255,0,0,1));
}
</style>
</head>
<body>

<h1>Linear Gradient - Transparency</h1>
<p>To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1 indicates full color (no transparency).</p>

<div id="grad1"></div>

</body>
</html>

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [25 June 2021 08:03 UTC](https://discourse.nodered.org/t/gradient-button-style/47616/2 "2021-06-25T08:03:30Z")

</div>

Add a ui\_template node set to "HEAD"

Enter the following...

```auto
<style>
.nr-dashboard-theme .nr-dashboard-button .md-button {
    background-image: linear-gradient(to top, rgba(255,0,0,1),rgba(255,0,0,0), rgba(255,0,0,1));
}
</style>

```

Example...  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/1/e13ca307b3e628fe73995a125121b790e757b54d.png)

This will however affect all buttons on the dashboard

If you want only few or a group of buttons styled, you will have to repeat the style entry multiple times for each button using a more specific css selector.

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [25 June 2021 08:44 UTC](https://discourse.nodered.org/t/gradient-button-style/47616/3 "2021-06-25T08:44:06Z")

</div>

> [@DrdP](#):
>
> I have inserted this into the button CSS section

Dumb question and too tired to search 😊 where is this CSS section to be found? In Edit Button Node or is there a special addon I need?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [25 June 2021 08:51 UTC](https://discourse.nodered.org/t/gradient-button-style/47616/4 "2021-06-25T08:51:55Z")

</div>

> [@Gunner](#):
>
> where is this CSS section to be found?

There is no means of adding CSS or a class to your button.

you have to use a suitable CSS selector and some style code.

I have raised a PR that would permit you to simply add a class name to the button (or text or group or button or ...) that would should simplify situations like this but it is not yet been accepted.

---

<div class="post-metadata">

**Author:** ![DrdP](https://avatars.discourse-cdn.com/v4/letter/d/b5ac83/32.png) [@DrdP](https://discourse.nodered.org/u/DrdP)\
**Post date:** [25 June 2021 09:36 UTC](https://discourse.nodered.org/t/gradient-button-style/47616/5 "2021-06-25T09:36:55Z")

</div>

Thank you Steve,

If I want to invert the gradient with a mouse hold over do  
i use the mouse down code? is there a resource where I could read up on the working of the css for Node-red dashboard?

Can the border of the button also be set with this style function?  
Thanks

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [25 June 2021 18:18 UTC](https://discourse.nodered.org/t/gradient-button-style/47616/6 "2021-06-25T18:18:22Z")

</div>

> [@Steve-Mcl](#):
>
> you have to use a suitable CSS selector and some style code.

Umm... what? 😛 OK, I understand I would need to determine and write the appropriate CSS code... but where to put it?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [25 June 2021 18:20 UTC](https://discourse.nodered.org/t/gradient-button-style/47616/7 "2021-06-25T18:20:41Z")

</div>

> [@Gunner](#):
>
> but where to put it?

In a UI template node inside style tags

> [@Steve-Mcl](#):
>
> a ui\_template node set to "HEAD"

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [25 June 2021 18:24 UTC](https://discourse.nodered.org/t/gradient-button-style/47616/8 "2021-06-25T18:24:51Z")

</div>

Ahh yes, a no0b moment... the template node holding the button, not the button node I want to change.. got 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:** [9 July 2021 18:24 UTC](https://discourse.nodered.org/t/gradient-button-style/47616/9 "2021-07-09T18:24:57Z")

</div>

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