Here is the code from the browser, “stove” and “desk” have different css while they certainly share the same template. This is really interesting, one button has fixed color while the other has var(–paper-item-icon-active-color). The fixed color is dynamically changing when I change brightness, while the card that has the variable stays intact.
Hi all. firstly thanks for all the work that has gone into this card, it is fantastic. I am hoping someone can help out here. Basically i have a garage door setup using a Shelly1 to operate the door, switch is in detached mode with a reed switch attached and the ‘virtual’ (apologies if this is not the correct term, little simple over here!) switch only operates for 1 second to simulate a button press. I can get the card to show either the state of the switch, open or closed, or the state of the ‘virtual’ switch (which only changes for the 1 second press). what i would like to do is use the button to operate the ‘virtual’ switch, but have the state of the switch report icon image and colour, ie. open = mdi:garage-open and red, closed = mdi:garage and green. I hope this makes sense. Is this possible? i have read i think all messages on this thread(it took a while) and i dont think I came across this, but may have missed it. Thanks in advance for anyone that can help.
Andy
I do not know what do you mean with virtual switch. Input helper? However, state dependent styles are simple, an example:
state:
- value: 'open'
icon: 'mdi:garage-open'
styles:
icon:
- color: red
- value: 'closed'
icon: 'mdi:garage'
styles:
icon:
- color: green
it was the best way i could think to describe powering the device. I mean to hit the button opens/ closes the door, which is fine, but i would like the button to show the state of a different entity. here is what i have working that shows the entity i want, but i cannot figure out how to have the button control the opener.
type: 'custom:button-card'
state:
- value: 'on'
color: red
icon: 'mdi:garage-open'
- value: 'off'
color: green
icon: 'mdi:garage'
tap_action:
action: toggle
entity: binary_sensor.shelly1_input
and kind of want to achieve this
type: 'custom:button-card'
entity: switch.shelly1_
tap_action:
action: toggle
state:
- entity: binary_sensor.shelly1_input
value: 'on'
color: red
icon: 'mdi:garage-open'
- entity: binary_sensor.shelly1_input
value: 'off'
color: green
icon: 'mdi:garage'
show_state: true
Forget this approach. I know this may work, but what about to create a script and call it?
Thanks Vahaldor. I didnt think to try a script, will give it a go and see if i can make something work. can you or anyone else point me in the right direction of how i would get all this together in a script please, was i on the right lines with the code i have posted? Appreciate you taking the time to respond to me.
You can do that:
type: 'custom:button-card'
entity: switch.shelly1_
tap_action:
action: toggle
state:
- operator: template
value: '[[[ return states["binary_sensor.shelly1_input"].state === "on" ]]]'
color: red
icon: 'mdi:garage-open'
- operator: template
value: '[[[ return states["binary_sensor.shelly1_input"].state === "off" ]]]'
color: green
icon: 'mdi:garage'
show_state: true
Or the opposite by assigning the binary_sensor as the entity and modifying the tap_action
you sir are a genius. I did try using the code you have in a different way to what you have put, but to be honest I did not get it as I have no idea on coding. I was missing the - operator: template line. Thank you for your time, this will revolutionise many of my buttons now.
1 Like
Super simple, I guess, but not sure how to do it. I run Adguard and have a toggle switch, below this switch I would like to show blocked % ratio (another sensor). Can the button toggle a switch and can another sensor be displayed below?
- entity: switch.adguard_protection
tap_action:
action: toggle
To display something only when a condition is fullfilled, you can use the conditional card.
I used this to create a view for different remote control devices.
There is a dropdown box I use to select what remote I want to use, and based on that selection, I only show the remote I want
- type: conditional
conditions:
- entity: input_select.dropdown1234
state: Orange
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: button
name: Gids
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.rmproplus_remote
device: Orange
command: tvgids
icon: 'hass:monitor-eye'
icon_height: 25px
Here, I show all buttons for the remote of the digicorder, provided by my cable company called Orange.
The button for each remote are in another conditional card, and which one is displayed is determined by the remoteselector dropdown box.
Thanks, but not really a conditional scenario. I basically (to simplify it) would like one sensor to be the button that i press and display another sensor below the button. To simplyfy it even more, can one sensor be shown as the “name” and another sensor as the “label” or “state”?
Yes, you can do that, replace sensor.xyz with your blocked ratio sensor:
show_label: true
label: '[[[ return `${states["sensor.xyz"].state}%` ]]]'
1 Like
Thank’s a lot!
coming to think of this, would there be a preference for that specific variable format over
show_label: true
label: '[[[ return states["sensor.xyz"].state + "%" ]]]'
at all?
No, same result, I just prefer to use the other syntax, it’s a personal choice 
Hi,
Small question
I created the card below, but now I’m looking to highlight the button if selected.
Is this possible in this config without entities under my button?
If possible, can somebody point me in the good direction regarding the code to use? 
And here my poor card config:
type: vertical-stack
cards:
- type: horizontal-stack
title: Kamers
cards:
- type: 'custom:button-card'
name: Woonkamer
icon: 'hass:sofa'
size: 30px
tap_action:
action: navigate
navigation_path: '#p1'
- type: 'custom:button-card'
name: Slaapkamer Ouders
icon: 'hass:bed'
size: 30px
tap_action:
action: navigate
navigation_path: '#p2'
- type: 'custom:button-card'
name: Slaapkamer Lukas
icon: 'hass:bed'
size: 30px
tap_action:
action: navigate
navigation_path: '#p3'
- type: 'custom:button-card'
name: Slaapkamer Jasper
icon: 'hass:bed'
size: 30px
tap_action:
action: navigate
navigation_path: '#p4'
- type: 'custom:button-card'
name: Logeerkamer
icon: 'hass:bed'
size: 30px
tap_action:
action: navigate
navigation_path: '#p5'
- type: 'custom:button-card'
name: Badkamer
icon: 'hass:shower'
size: 30px
tap_action:
action: navigate
navigation_path: '#p6'
- type: 'custom:state-switch'
entity: hash
default: p1
states:
p1:
type: horizontal-stack
title: Sensoren
cards:
- type: sensor
entity: sensor.netatmo_kerkstraat_10_woonkamer_temperature
graph: line
name: Temperatuur
- type: sensor
graph: line
entity: sensor.netatmo_kerkstraat_10_woonkamer_humidity
name: Luchtvochtigheid
- type: sensor
graph: line
entity: sensor.netatmo_kerkstraat_10_woonkamer_co2
name: Co2
p2:
type: horizontal-stack
title: sensoren
cards:
- type: sensor
entity: sensor.slaapkamer_ouders
graph: line
naam: Temperatuur
- type: sensor
graph: line
entity: sensor.netatmo_kerkstraat_10_woonkamer_slaapkamer_ouders_humidity
name: Luchtvochtigheid
- type: sensor
graph: line
entity: sensor.netatmo_kerkstraat_10_woonkamer_slaapkamer_ouders_co2
name: Co2
p3:
type: horizontal-stack
title: Sensoren
cards:
- type: sensor
entity: >-
sensor.netatmo_kerkstraat_10_woonkamer_slaapkamer_lukas_temperature
graph: line
naam: Temperatuur
- type: sensor
graph: line
entity: sensor.netatmo_kerkstraat_10_woonkamer_slaapkamer_lukas_humidity
name: Luchtvochtigheid
- type: sensor
graph: line
entity: sensor.netatmo_kerkstraat_10_woonkamer_slaapkamer_lukas_co2
name: Co2
p4:
type: horizontal-stack
title: sensoren
cards:
- type: sensor
entity: sensor.slaapkamer_jasper
graph: line
name: Temperatuur
- type: 'custom:state-switch'
entity: hash
default: p1
states:
p1:
type: horizontal-stack
title: Licht & Security
cards:
- type: entities
entities:
- light.salon_licht
- light.salon_spots
- light.eetkamer_licht
- light.eetkamer_spots
- type: entity
entity: binary_sensor.shuifdeur_eetkamer
name: Schuifdeur
- type: entity
entity: binary_sensor.terrasdeur_eetkamer
name: Terrasdeur
p2:
type: horizontal-stack
title: Licht & Security
cards:
- type: entities
entities:
- light.slaapkamer_ouders_licht
- light.nachtlamp_mama
- light.nachtlamp_papa
- type: entity
entity: binary_sensor.slaapkamer_ouders
name: Raam
1 Like
Search box-shadow. Change on the state.
I’m not in a position to offer any code but I’ll send it when I’m back in front of my home computer.
Hi,
i have this on one of my buttons,
It is highlighted when on, and no background when off.
Here is the code:
type: 'custom:button-card'
color_type: icon
entity: light.dimmable_light_2
size: 55%
name: Light
state:
- value: 'on'
spin: false
color: yellow
icon: 'mdi:lightbulb'
styles:
state: 'on'
card:
- box-shadow: 0px 0px 10px 1px cyan
icon:
- color: magenta
- operator: default
spin: false
color: grey
icon: 'mdi:lightbulb'
when active it looks like this:
when is inactive it looks like this:
Hope it helps
Bogdan
1 Like