# Style normal buttons to match the multistate-switch

**URL:** <https://discourse.nodered.org/t/style-normal-buttons-to-match-the-multistate-switch/52534>\
**Category:** Dashboard\
**Created:** [21 October 2021 21:19 UTC](https://discourse.nodered.org/t/style-normal-buttons-to-match-the-multistate-switch/52534 "2021-10-21T21:19:27Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [21 October 2021 21:19 UTC](https://discourse.nodered.org/t/style-normal-buttons-to-match-the-multistate-switch/52534/1 "2021-10-21T21:19:27Z")

</div>

Hi folks,

Some users have been asking us if we could add a button-like-behaviour to our node-red-contrib-multistate-switch. But of course - like @dceejay already mentioned - a switch is not a button...

But to make sure your buttons have the same style as the multistate switches, you can easily style your normal buttons to look similar to the multistate switches:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/4/94399b51f42a084b118257133e27579292a5f54b.png)

You can read [this](https://github.com/bartbutenaers/node-red-contrib-ui-multistate-switch/wiki/Style-buttons-like-the-multistate-switch) tutorial to see how easy it is.

All credits go to @hotNipi for this one. I was wearing only the hat of technical writer 🙂

Have fun with it !

HotNipi and Bart

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [23 October 2021 16:11 UTC](https://discourse.nodered.org/t/style-normal-buttons-to-match-the-multistate-switch/52534/2 "2021-10-23T16:11:49Z")

</div>

I tried with FF and Chrome but it seems to spill out of its container ?

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/8/082c322e775edefebf3bb43387c35808b921f39b.png)

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [24 October 2021 17:23 UTC](https://discourse.nodered.org/t/style-normal-buttons-to-match-the-multistate-switch/52534/3 "2021-10-24T17:23:57Z")

</div>

@hotNipi could you take a look at this please ?

---

<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:** [24 October 2021 17:44 UTC](https://discourse.nodered.org/t/style-normal-buttons-to-match-the-multistate-switch/52534/4 "2021-10-24T17:44:52Z")

</div>

Share that part of flow with those buttons including the CSS.

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [25 October 2021 01:39 UTC](https://discourse.nodered.org/t/style-normal-buttons-to-match-the-multistate-switch/52534/5 "2021-10-25T01:39:29Z")

</div>

Sorry it looks like its fighting with some of your other CSS tips.

I thought it would have targeted OK using custom class, but will have a look to see what else I need to overide from "Master style override"

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [25 October 2021 21:14 UTC](https://discourse.nodered.org/t/style-normal-buttons-to-match-the-multistate-switch/52534/6 "2021-10-25T21:14:55Z")

</div>

Hi @Sean-McG,  
I will need to redirect you unfortunately to my CSS partner @hotNipi. But the poor devil is currently busy behind the scene, answering all my questions about one of his other nodes 😉

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [26 October 2021 02:12 UTC](https://discourse.nodered.org/t/style-normal-buttons-to-match-the-multistate-switch/52534/7 "2021-10-26T02:12:40Z")

</div>

It's OK I found some other CSS that was clashing.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [26 October 2021 04:49 UTC](https://discourse.nodered.org/t/style-normal-buttons-to-match-the-multistate-switch/52534/8 "2021-10-26T04:49:58Z")

</div>

Is it something general that we should update or add on our readme page, to avoid other users run into the same problem?

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [26 October 2021 15:17 UTC](https://discourse.nodered.org/t/style-normal-buttons-to-match-the-multistate-switch/52534/9 "2021-10-26T15:17:20Z")

</div>

Bart,

No its all OK now, I think its just down to my experiments with CSS. I should have thought of that before posting.

---

<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:** [25 November 2021 15:17 UTC](https://discourse.nodered.org/t/style-normal-buttons-to-match-the-multistate-switch/52534/10 "2021-11-25T15:17:50Z")

</div>

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