# Dynamic change of background in the button node

**URL:** <https://discourse.nodered.org/t/dynamic-change-of-background-in-the-button-node/100015>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [23 December 2025 17:49 UTC](https://discourse.nodered.org/t/dynamic-change-of-background-in-the-button-node/100015 "2025-12-23T17:49:19Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![AloisBachmeier](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/aloisbachmeier/32/82319_2.png) [@AloisBachmeier](https://discourse.nodered.org/u/AloisBachmeier)\
**Post date:** [23 December 2025 17:49 UTC](https://discourse.nodered.org/t/dynamic-change-of-background-in-the-button-node/100015/1 "2025-12-23T17:49:19Z")

</div>

I'm not able to make this running. What am I doing wrong? Pls help!

```json
[
    {
        "id": "ac065458f1f91998",
        "type": "function",
        "z": "8ea5dbdfb7c2ac3f",
        "name": "function 2",
        "func": "// Annahme: msg.payload enthält einen Wert, z.B. 0 oder 1\n\nif (msg.payload === 1) {\n msg.ui_update = {\n \"class\": \"my-green-class\"\n };\n} else {\n msg.ui_update = {\n \"class\": \"my-red-class\"\n };\n}\n\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 380,
        "y": 460,
        "wires": [
            [
                "86dfeed22a7a9fa9",
                "647a8c848f386b3e"
            ]
        ]
    },
    {
        "id": "c262ccaed06db7a3",
        "type": "inject",
        "z": "8ea5dbdfb7c2ac3f",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "0",
        "payloadType": "num",
        "x": 190,
        "y": 420,
        "wires": [
            [
                "ac065458f1f91998"
            ]
        ]
    },
    {
        "id": "ec1fbdcc746eb270",
        "type": "inject",
        "z": "8ea5dbdfb7c2ac3f",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "1",
        "payloadType": "num",
        "x": 190,
        "y": 460,
        "wires": [
            [
                "ac065458f1f91998"
            ]
        ]
    },
    {
        "id": "647a8c848f386b3e",
        "type": "debug",
        "z": "8ea5dbdfb7c2ac3f",
        "name": "debug 4",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": true,
        "complete": "true",
        "targetType": "full",
        "statusVal": "payload",
        "statusType": "auto",
        "x": 580,
        "y": 520,
        "wires": []
    },
    {
        "id": "d8cd8ecf5cec9f9a",
        "type": "ui-template",
        "z": "8ea5dbdfb7c2ac3f",
        "group": "",
        "page": "",
        "ui": "2bcd223180e211a8",
        "name": "Templates Elemente",
        "order": 3,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "//Button Hintergrund rot\n.my-red-class button.v-btn {\n background-color: #F44336 !important;\n}\n\n//Button Hintergrund grün\n.my-green-class button.v-btn {\n background-color: #26A69A !important;\n}\n",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "site:style",
        "className": "",
        "x": 420,
        "y": 380,
        "wires": [
            []
        ]
    },
    {
        "id": "86dfeed22a7a9fa9",
        "type": "ui-button",
        "z": "8ea5dbdfb7c2ac3f",
        "group": "1b852b09893fdafc",
        "name": "",
        "label": "neuer Text",
        "order": 1,
        "width": "2",
        "height": "1",
        "emulateClick": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "test",
        "icon": "access-point",
        "iconPosition": "left",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "buttonColor": "",
        "textColor": "",
        "iconColor": "",
        "enableClick": true,
        "enablePointerdown": false,
        "pointerdownPayload": "",
        "pointerdownPayloadType": "str",
        "enablePointerup": false,
        "pointerupPayload": "",
        "pointerupPayloadType": "str",
        "x": 590,
        "y": 460,
        "wires": [
            []
        ]
    },
    {
        "id": "2bcd223180e211a8",
        "type": "ui-base",
        "name": "Mein Dashboard",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "headerContent": "page",
        "navigationStyle": "default",
        "titleBarStyle": "default",
        "showReconnectNotification": true,
        "notificationDisplayTime": 1,
        "showDisconnectNotification": true,
        "allowInstall": false
    },
    {
        "id": "1b852b09893fdafc",
        "type": "ui-group",
        "name": "Templates & Tests",
        "page": "dd776574ec954a62",
        "width": 6,
        "height": 1,
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "dd776574ec954a62",
        "type": "ui-page",
        "name": "Template & Test",
        "ui": "2bcd223180e211a8",
        "path": "/page5",
        "icon": "home",
        "layout": "grid",
        "theme": "1cbfd3a7a1359037",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "5"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Small Desktop",
                "px": "768",
                "cols": "9"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": 4,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "1cbfd3a7a1359037",
        "type": "ui-theme",
        "name": "Standardthema",
        "colors": {
            "surface": "#097479",
            "primary": "#0094ce",
            "bgPage": "#111111",
            "groupBg": "#333333",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    },
    {
        "id": "6951fe679329527a",
        "type": "global-config",
        "env": [],
        "modules": {
            "@flowfuse/node-red-dashboard": "1.30.0"
        }
    }
]

```

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [24 December 2025 06:15 UTC](https://discourse.nodered.org/t/dynamic-change-of-background-in-the-button-node/100015/2 "2025-12-24T06:15:50Z")

</div>

Sorry, not the PERFECT solution, but this works.

```auto
[
    {
        "id": "a1d0ccd31d5c38f6",
        "type": "change",
        "z": "b39000460508d582",
        "name": "Normal",
        "rules": [
            {
                "t": "set",
                "p": "ui_update.label",
                "pt": "msg",
                "to": "PASS",
                "tot": "str"
            },
            {
                "t": "set",
                "p": "ui_update.buttonColor",
                "pt": "msg",
                "to": "blue",
                "tot": "str"
            },
            {
                "t": "delete",
                "p": "payload",
                "pt": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 5020,
        "y": 880,
        "wires": [
            [
                "f31c626999eff100"
            ]
        ]
    },
    {
        "id": "f7ee0d6fc94c0383",
        "type": "change",
        "z": "b39000460508d582",
        "name": "Hold",
        "rules": [
            {
                "t": "set",
                "p": "ui_update.label",
                "pt": "msg",
                "to": "HOLD",
                "tot": "str"
            },
            {
                "t": "set",
                "p": "ui_update.buttonColor",
                "pt": "msg",
                "to": "red",
                "tot": "str"
            },
            {
                "t": "delete",
                "p": "payload",
                "pt": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 5010,
        "y": 920,
        "wires": [
            [
                "f31c626999eff100"
            ]
        ]
    },
    {
        "id": "f31c626999eff100",
        "type": "ui-button",
        "z": "b39000460508d582",
        "group": "1b852b09893fdafc",
        "name": "Hold",
        "label": "",
        "order": 5,
        "width": "1",
        "height": "1",
        "emulateClick": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "iconPosition": "left",
        "payload": "X",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "buttonColor": "",
        "textColor": "",
        "iconColor": "",
        "enableClick": true,
        "enablePointerdown": false,
        "pointerdownPayload": "",
        "pointerdownPayloadType": "str",
        "enablePointerup": false,
        "pointerupPayload": "",
        "pointerupPayloadType": "str",
        "x": 5190,
        "y": 880,
        "wires": [
            []
        ]
    },
    {
        "id": "c31f26c6c17d7a28",
        "type": "inject",
        "z": "b39000460508d582",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "0",
        "payloadType": "num",
        "x": 4860,
        "y": 880,
        "wires": [
            [
                "a1d0ccd31d5c38f6"
            ]
        ]
    },
    {
        "id": "2e4e3cb03d97be32",
        "type": "inject",
        "z": "b39000460508d582",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "1",
        "payloadType": "num",
        "x": 4860,
        "y": 920,
        "wires": [
            [
                "f7ee0d6fc94c0383"
            ]
        ]
    },
    {
        "id": "1b852b09893fdafc",
        "type": "ui-group",
        "name": "Templates & Tests",
        "page": "dd776574ec954a62",
        "width": 6,
        "height": 1,
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "dd776574ec954a62",
        "type": "ui-page",
        "name": "Template & Test",
        "ui": "379027033ed5c83a",
        "path": "/page5",
        "icon": "home",
        "layout": "grid",
        "theme": "1cbfd3a7a1359037",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "5"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Small Desktop",
                "px": "768",
                "cols": "9"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": 4,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "379027033ed5c83a",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "headerContent": "page",
        "navigationStyle": "default",
        "titleBarStyle": "default",
        "showReconnectNotification": true,
        "notificationDisplayTime": 1,
        "showDisconnectNotification": true,
        "allowInstall": true
    },
    {
        "id": "1cbfd3a7a1359037",
        "type": "ui-theme",
        "name": "Standardthema",
        "colors": {
            "surface": "#097479",
            "primary": "#0094ce",
            "bgPage": "#111111",
            "groupBg": "#333333",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

```

Sorry the text will be corrupted.

After a lot of digging, I don't know what you are trying to do is supported.  
But I'm not an expert.

---

<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:** [24 December 2025 07:22 UTC](https://discourse.nodered.org/t/dynamic-change-of-background-in-the-button-node/100015/3 "2025-12-24T07:22:39Z")

</div>

This reply timed out.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [24 December 2025 12:05 UTC](https://discourse.nodered.org/t/dynamic-change-of-background-in-the-button-node/100015/4 "2025-12-24T12:05:46Z")

</div>

> [@jbudd](#):
>
> msg.ui\_update = {"buttonColor": "skybluepink"}

@AloisBachmeier, yes, that is the easy way to do it for those not comfortable using CSS. See the help text for the button node in the editor for all the other parameters that can be adjusted dynamically.

---

<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:** [7 January 2026 12:05 UTC](https://discourse.nodered.org/t/dynamic-change-of-background-in-the-button-node/100015/5 "2026-01-07T12:05:46Z")

</div>

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