Gradient Button Style

Dashboard
1

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.

<!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>
2

Add a ui_template node set to "HEAD"

Enter the following...

<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

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.

3

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

4

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.

5

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

6

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

7

In a UI template node inside style tags

1 Like
8

Ahh yes, a no0b moment... the template node holding the button, not the button node I want to change.. got it :blush:

9

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