I am trying to make a custom button for a ceiling fan. I only want/need “off”, MED, and HIGH. The problem I am having is I can’t figure out how to make the background change on MED and HIGH. The only way I get it to change is by a "state value “on” and both MED and HIGH light up. I would like for only the one selected to light up.
The buttons preform like they should it’s just the back ground doesn’t. I have tried doing value medium / high and 66 / 100 and it doesn’t work.
type: horizontal-stack
cards:
- type: custom:button-card
entity: fan.bedroom_ceiling_fan_sonoff
name: "OFF"
show_name: true
show_icon: false
tap_action:
action: perform-action
perform_action: fan.set_percentage
target:
entity_id:
- fan.bedroom_ceiling_fan_sonoff
data:
percentage: 0
state:
- value: "off"
styles:
card:
- background-color: teal
styles:
card:
- padding: 0px 3px 0px 3px;
- height: 35px
- width: 325x
- background-color: transparent
- border: 0px solid rgb(80,80,80)
- border-radius: 10%
- type: custom:button-card
entity: fan.bedroom_ceiling_fan_sonoff
name: MED
show_name: true
show_icon: false
tap_action:
action: perform-action
perform_action: fan.set_percentage
target:
entity_id:
- fan.bedroom_ceiling_fan_sonoff
data:
percentage: 66
state:
- value: "on"
styles:
card:
- background-color: teal
styles:
card:
- height: 35px
- width: 325x
- background-color: transparent
- border: 0px solid rgb(80,80,80)
- border-radius: 10%
- type: custom:button-card
entity: fan.bedroom_ceiling_fan_sonoff
name: HIGH
show_name: true
show_icon: false
tap_action:
action: perform-action
perform_action: fan.set_percentage
target:
entity_id:
- fan.bedroom_ceiling_fan_sonoff
data:
percentage: 100
state:
- value: "on"
styles:
card:
- background-color: teal
styles:
card:
- height: 35px
- width: 325x
- background-color: transparent
- border: 0px solid rgb(80,80,80)
- border-radius: 10%