# Set image for buttons

**URL:** <https://discourse.nodered.org/t/set-image-for-buttons/51491>\
**Category:** Dashboard\
**Created:** [24 September 2021 23:23 UTC](https://discourse.nodered.org/t/set-image-for-buttons/51491 "2021-09-24T23:23:48Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![bmneves](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bmneves/32/52830_2.png) [@bmneves](https://discourse.nodered.org/u/bmneves)\
**Post date:** [24 September 2021 23:23 UTC](https://discourse.nodered.org/t/set-image-for-buttons/51491/1 "2021-09-24T23:23:48Z")

</div>

Hello guys,  
i'm new to node red, and building my first app.  
i have some buttons and instead of the label i want to show an image.  
here on the forum i found this code and tweak it (change the name of tab and group and image parameters)

```auto
<style>
#tab_group_cards > md-card:nth-child(1) > button {
    background: url(/home.png);
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: contain; 
  }
</style>

```

it worked fine.  
but the thing is, if i change the order of the buttons, create new one, or delete some, the child number will change, which will affect the image on each button.  
is there a way to use the node id instead of child number?

---

<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:** [24 September 2021 23:45 UTC](https://discourse.nodered.org/t/set-image-for-buttons/51491/2 "2021-09-24T23:45:53Z")

</div>

> [@bmneves](#):
>
> is there a way to use the node id instead of child number?

There is... unfortunately I get too confused on the order to use when messing with CSS.

I think that somewhere somehow, you place this before, or with the existing line...` > button {`

I have this when isolation a button, but for changing colours when hovering...

```auto
<style id="dashboard-style-override">
[node-id="ec0ae86776081ecf"] > button:hover {
    background-color: #00FF00 !important;
}
</style>

```

---

<div class="post-metadata">

**Author:** ![bmneves](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bmneves/32/52830_2.png) [@bmneves](https://discourse.nodered.org/u/bmneves)\
**Post date:** [24 September 2021 23:57 UTC](https://discourse.nodered.org/t/set-image-for-buttons/51491/3 "2021-09-24T23:57:06Z")

</div>

thanks a lot @Gunner it works perfectly

```auto
<style>
#tab_group_cards > [node-id="f9dea81457078859"] > button {
        background: url(/home.png);
        background-position: center;
        background-repeat: no-repeat; 
        background-size: contain; 
    }
</style>

```

---

<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 September 2021 00:45 UTC](https://discourse.nodered.org/t/set-image-for-buttons/51491/4 "2021-09-25T00:45:37Z")

</div>

Well, glad I was able to help... unfortunately I can't seem to get it to work for me 😛

I was assuming you were simply using a `template`, set to widget in group, then sizing the `ui_button` accordingly.

But while the button works fine, no image or indication of messed up code???

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/4/24225f9d47e80f91df50f3995b3bfe68e47d310b.png) ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/1/61d4bb507001c761ddb6c06791094b062e8e150b.png)

How are you doing it?

**EDIT** - BIG Opps... forget it... CSS is mind twisting 😛  
I didn't change to the appropriate-for-me `#Tests_Image_Button_cards`

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/0/9053f05d48f3c7b97f94c4c879b1a3ed9982fd0d.png)

---

<div class="post-metadata">

**Author:** ![bmneves](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bmneves/32/52830_2.png) [@bmneves](https://discourse.nodered.org/u/bmneves)\
**Post date:** [25 September 2021 00:57 UTC](https://discourse.nodered.org/t/set-image-for-buttons/51491/5 "2021-09-25T00:57:36Z")

</div>

you need to replace tab and group with the name of your tab and group.  
for instance my tab is called "main" and the group is called "controls". so for me the code is

```auto
<style>
#main_controls_cards > [node-id="f9dea81457078859"] > button {
        background: url(/home.png);
        background-position: center;
        background-repeat: no-repeat; 
        background-size: contain; 
    }
</style>

```

let me know if it works

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [25 September 2021 02:28 UTC](https://discourse.nodered.org/t/set-image-for-buttons/51491/6 "2021-09-25T02:28:42Z")

</div>

Since the node id is unique, it _ought to be_ sufficient to use

```auto
<style>
[node-id="03c897154d539be7"] button {
    background-color: red !important;
}
</style>

```

#TAB\_GROUP\_cards is useful instead of node-id if you are styling all the buttons in a group.  
The \> before button turns out not to be necessary.  
If you are overriding a property that's defined elsewhere in the CSS you need !important. Contrariwise, sometimes you don't. CSS is deep and confusing. 😁

---

<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 October 2021 02:29 UTC](https://discourse.nodered.org/t/set-image-for-buttons/51491/7 "2021-10-09T02:29:25Z")

</div>

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