# Background color button - CSS

**URL:** https://discourse.nodered.org/t/background-color-button-css/79201
**Category:** Dashboard
**Created:** [14 June 2023 13:43 UTC](https://discourse.nodered.org/t/background-color-button-css/79201 "2023-06-14T13:43:46Z")
**Posts on this page:** 12
**Page:** 1

<div class="post-metadata">

### Author: ![Loveflowersx](https://avatars.discourse-cdn.com/v4/letter/l/94ad74/32.png) [@Loveflowersx](https://discourse.nodered.org/u/Loveflowersx)
#### Post date: [14 June 2023 13:43 UTC](https://discourse.nodered.org/t/background-color-button-css/79201/1 "2023-06-14T13:43:46Z")

</div>

Hi everyone,

I have this css and I want to change this button node to black with white letters. I have tried several ways and nothing, not even from the node itself.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/7/37e1bbc467a1334949f3888ae831e35efe0929aa.png)

```auto
<style>

    /*Main background*/
    body {
        background: -webkit-linear-gradient(
            55deg,
            #009785 0%,
            #245aa5 50%,
            #b800e9 100%
            );
    }

    /*Top bar*/
    body.nr-dashboard-theme md-toolbar,
    body.nr-dashboard-theme md-content md-card {
        background-color: transparent !important;
        color: #FFFFFF !important;
    }

    /*Left menu*/
    /*Sidebar*/
    body.nr-dashboard-theme md-sidenav {
        color: white !important;
        background-color: rgba(0,0,0,0) !important;
    }
    /*Hover selection*/
    a.md-no-style, button.md-no-style {
        border-radius: 10px !important;
    }
    /*Selected*/
    .nr-menu-item-active div button {
        border-right: 4px solid rgb(41 98 255) !important;
    }
    /*List*/
    body.nr-dashboard-theme md-sidenav div.md-list-item-inner {
        color: white !important;
        background-color: rgba(40,85,165,1) !important;
        border-radius: 10px !important;
    }

    /*Groups*/
    ui-card-panel {
        background-color: rgba(255,255,255,0.1) !important;
        border-radius: 10px !important;
    }
    .nr-dashboard-theme ui-card-panel {
        border: none !important;
    }
    /*Name groups*/
    .nr-dashboard-theme ui-card-panel p.nr-dashboard-cardtitle {
        color: rgba(255, 255, 255, 0.5) !important;
    }

    /*Bouttons*/
    .nr-dashboard-theme .nr-dashboard-button .md-button {
        background-color: rgba(255,255,255,.1) !important;
    }
    .md-button {
        border-radius: 10px !important;
    }

    /*Dropdown menu*/
    .nr-dashboard-theme md-select-menu{
        background-color: rgba(40,85,165,1) !important;
    }
    .nr-dashboard-theme md-select-menu, .nr-dashboard-theme md-select-menu md-option {
        background-color: transparent !important;
    }
    .nr-dashboard-theme .md-select-menu-container {
        border-radius: 10px !important;
        border: none !important;
    }
    .nr-dashboard-theme md-select-menu md-option[selected] {
        color: white !important;
        background-color: #1a3566 !important;
    }

    /*Template*/
    md-card>img, md-card>md-card-header img, md-card md-card-title-media img {
        border-radius: 10px !important;
    }

    /* Color picker text BG */
    .nr-dashboard-theme .color-picker-input-wrapper > input {
        color: white !important;
        background-color: transparent !important;
    }
    
    /* Agrega esta regla después del bloque existente */
    body.nr-dashboard-theme p {
        background-color: transparent !important;
    }
    /*nose si funciona */
    ui-card-panel:has(.invisible-group){
   opacity:0 !important;
    }
    
    /* Agrega esta regla después del bloque existente */
    body.nr-dashboard-theme .mi-elemento {
        font-weight: bold !important;
        /* Otros estilos personalizados */
    }
    
    /* Agrega esta regla después del bloque existente */
    body.nr-dashboard-theme .mi-elemento-2 {
        font-weight: bold !important;
        font-size: 20px;
        /* Otros estilos personalizados */
    }
    
    /* background grafica */
    body.nr-dashboard-theme .mi-elemento-3 {
        background-color: black !important;
        /* Otros estilos personalizados */
    }
    
</style>

```

Thank you very much!

Best regards

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [14 June 2023 17:15 UTC](https://discourse.nodered.org/t/background-color-button-css/79201/2 "2023-06-14T17:15:07Z")

</div>

If one and only button should be different from others, give it a unique class name and for your dashboard CSS add

```auto
.your-unique-class-name button {
    background-color: black !important;
    color: white !important;
}

```

---

<div class="post-metadata">

### Author: ![Loveflowersx](https://avatars.discourse-cdn.com/v4/letter/l/94ad74/32.png) [@Loveflowersx](https://discourse.nodered.org/u/Loveflowersx)
#### Post date: [15 June 2023 05:24 UTC](https://discourse.nodered.org/t/background-color-button-css/79201/3 "2023-06-15T05:24:56Z")

</div>

Yesterday I did something similar and it didn't work, and now I've put your code and it doesn't work either. It's as if I were stepping on a code from above.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/c/ac7c987b70d182cb333aee989552365213f95e06.png)

Thank you very much!!

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [15 June 2023 05:27 UTC](https://discourse.nodered.org/t/background-color-button-css/79201/4 "2023-06-15T05:27:13Z")

</div>

> [@hotNipi](#):
>
> give it a unique class name

**button** is not unique enough.

If you choose some class name ("my-unique-button" on that next image)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/b/6b946b1d5897f3a484d49dd75026a9737484f69f.png)

you'll need to adjust the CSS rule accordingly

```auto
.my-unique-button button {
    background-color: black !important;
    color: white !important;
}

```

---

<div class="post-metadata">

### Author: ![Loveflowersx](https://avatars.discourse-cdn.com/v4/letter/l/94ad74/32.png) [@Loveflowersx](https://discourse.nodered.org/u/Loveflowersx)
#### Post date: [15 June 2023 05:35 UTC](https://discourse.nodered.org/t/background-color-button-css/79201/5 "2023-06-15T05:35:09Z")

</div>

In CSS class name, I have put:

button  
your-unique-class-name

Then I changed your-unique-class-name to my-button, also button to another name and nothing

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

Thank you very much!!

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [15 June 2023 05:52 UTC](https://discourse.nodered.org/t/background-color-button-css/79201/6 "2023-06-15T05:52:44Z")

</div>

OK. That is because you already use the` !important` flag for all of your buttons.

It takes over what ever you choose do afterwards. Powerful but same time restrictive rule.

Still there are some tricks...

Change your CSS rule

```auto
     /*Bouttons*/
    .nr-dashboard-theme .nr-dashboard-button .md-button {
        background-color: rgba(255, 255, 255, .1) !important;
    }

```

To not affect buttons where you need to have different look.

```auto
    /*Bouttons*/
    .nr-dashboard-theme .nr-dashboard-button:not(.my-unique-button) .md-button {
        background-color: rgba(255, 255, 255, .1) !important;
    }

```

See the `:not()` selectror.

You are using the !important flag on every rule. That is not recommended way to do things. Use it only for last resort if you can't make your rules to apply due the [CSS specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity).

---

<div class="post-metadata">

### Author: ![Loveflowersx](https://avatars.discourse-cdn.com/v4/letter/l/94ad74/32.png) [@Loveflowersx](https://discourse.nodered.org/u/Loveflowersx)
#### Post date: [15 June 2023 06:01 UTC](https://discourse.nodered.org/t/background-color-button-css/79201/7 "2023-06-15T06:01:44Z")

</div>

You know!, yesterday I saw that it could come from there...thank you very much.

I have changed that and now the buttons are like this, instead of transparent for example state is invisible, why change?

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/c/2cdfc4a1b7f5e3f7a9a27ecbab2fe6e943df383c.png)

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [15 June 2023 06:05 UTC](https://discourse.nodered.org/t/background-color-button-css/79201/8 "2023-06-15T06:05:45Z")

</div>

Doesn't happen for me. Paste again your CSS

---

<div class="post-metadata">

### Author: ![Loveflowersx](https://avatars.discourse-cdn.com/v4/letter/l/94ad74/32.png) [@Loveflowersx](https://discourse.nodered.org/u/Loveflowersx)
#### Post date: [15 June 2023 06:07 UTC](https://discourse.nodered.org/t/background-color-button-css/79201/9 "2023-06-15T06:07:43Z")

</div>

Thank you very much for helping me!!

```auto
<style>

    /*Main background*/
    body {
        background: -webkit-linear-gradient(
            55deg,
            #009785 0%,
            #245aa5 50%,
            #b800e9 100%
            );
    }

    /*Top bar*/
    body.nr-dashboard-theme md-toolbar,
    body.nr-dashboard-theme md-content md-card {
        background-color: transparent !important;
        color: #FFFFFF !important;
    }

    /*Left menu*/
    /*Sidebar*/
    body.nr-dashboard-theme md-sidenav {
        color: white !important;
        background-color: rgba(0,0,0,0) !important;
    }
    /*Hover selection*/
    a.md-no-style, button.md-no-style {
        border-radius: 10px !important;
    }
    /*Selected*/
    .nr-menu-item-active div button {
        border-right: 4px solid rgb(41 98 255) !important;
    }
    /*List*/
    body.nr-dashboard-theme md-sidenav div.md-list-item-inner {
        color: white !important;
        background-color: rgba(40,85,165,1) !important;
        border-radius: 10px !important;
    }

    /*Groups*/
    ui-card-panel {
        background-color: rgba(255,255,255,0.1) !important;
        border-radius: 10px !important;
    }
    .nr-dashboard-theme ui-card-panel {
        border: none !important;
    }
    /*Name groups*/
    .nr-dashboard-theme ui-card-panel p.nr-dashboard-cardtitle {
        color: rgba(255, 255, 255, 0.5) !important;
    }

    //*Bouttons*/
    .nr-dashboard-theme .nr-dashboard-button:not(.my-unique-button) .md-button {
        background-color: rgba(255, 255, 255, .1) !important;
    }
    .md-button {
        border-radius: 10px !important;
    }

    /*Dropdown menu*/
    .nr-dashboard-theme md-select-menu{
        background-color: rgba(40,85,165,1) !important;
    }
    .nr-dashboard-theme md-select-menu, .nr-dashboard-theme md-select-menu md-option {
        background-color: transparent !important;
    }
    .nr-dashboard-theme .md-select-menu-container {
        border-radius: 10px !important;
        border: none !important;
    }
    .nr-dashboard-theme md-select-menu md-option[selected] {
        color: white !important;
        background-color: #1a3566 !important;
    }

    /*Template*/
    md-card>img, md-card>md-card-header img, md-card md-card-title-media img {
        border-radius: 10px !important;
    }

    /* Color picker text BG */
    .nr-dashboard-theme .color-picker-input-wrapper > input {
        color: white !important;
        background-color: transparent !important;
    }
    
    /* Agrega esta regla después del bloque existente */
    body.nr-dashboard-theme p {
        background-color: transparent !important;
    }
    /*nose si funciona */
    ui-card-panel:has(.invisible-group){
   opacity:0 !important;
    }
    
    /* Agrega esta regla después del bloque existente */
    body.nr-dashboard-theme .mi-elemento {
        font-weight: bold !important;
        /* Otros estilos personalizados */
    }
    
    /* Agrega esta regla después del bloque existente */
    body.nr-dashboard-theme .mi-elemento-2 {
        font-weight: bold !important;
        font-size: 20px;
        /* Otros estilos personalizados */
    }
    
    /* background grafica */
    body.nr-dashboard-theme .mi-elemento-3 {
        background-color: black !important;
        /* Otros estilos personalizados */
    }
    
    .my-unique-button button {
    background-color: black !important;
    color: white !important;
    }
    
</style>

```

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [15 June 2023 06:36 UTC](https://discourse.nodered.org/t/background-color-button-css/79201/10 "2023-06-15T06:36:50Z")

</div>

Change the "Bouttons" rule again

```auto
 /*Bouttons*/
    .nr-dashboard-button button {
        background-color: rgba(255, 255, 255, .1) !important;
    }

```

And keep in mind that rule for unique button must be after that rule. The order matters.

---

<div class="post-metadata">

### Author: ![Loveflowersx](https://avatars.discourse-cdn.com/v4/letter/l/94ad74/32.png) [@Loveflowersx](https://discourse.nodered.org/u/Loveflowersx)
#### Post date: [15 June 2023 06:42 UTC](https://discourse.nodered.org/t/background-color-button-css/79201/11 "2023-06-15T06:42:54Z")

</div>

Now, if it works!!

I am learning a lot, pure gold you!

Thank you very much! 🧙‍♂️

---

<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: [29 June 2023 06:42 UTC](https://discourse.nodered.org/t/background-color-button-css/79201/12 "2023-06-29T06:42:55Z")

</div>

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