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
It is possible if you check the path in the URL created by the state-switch card.
Something like:
styles:
card:
- background-color: | # or anything else
[[[
if (!this._monitoring) {
this._monitoring = true;
function hashHandler(elt = this) {
elt.update();
}
window.addEventListener('hashchange', hashHandler, false);
}
return window.location.hash.slice(1) === "p1" ? COLOR_ACTIVE : null
]]]
I didn’t test it, but it should work. It’s bit hacky though
Hi, so I’m interested in trying this as well (so I can move from input_select to hash). I can’t wrap my head around that code however. I need it to be color A by default and if the hash matches, it needs to be color B. But in your code I can’t seem to find a place where I could insert the color codes for either states. I figure I need to change null to my color I want it to be when matched right? But how can I set the color for when it’s not matched?
Could you point me in the right direction?
Change COLOR_ACTIVE to the color you want (eg 'rgb(255,0,0)' for matching hash and keep null or replace with another color for non-matching hash
Thanks! That part now works. Now I notice the button doesn’t update on action, only on reload of the page. I figure this is the case since I have no entity tied to it, so the card can update itself. Since it’s now hash and not input_select anymore, I don’t have an entity to use to update the card.
I read the part about triggers_update on the docs, but I didn’t find a solution there myself. Do you know what I could tie it to so it updates on tap_action? The important part is so it only updates on the device that presses it (which is why I want to refrain from input_select).
The part of the code you don’t understand should handle that so I’ll have to look further 
1 Like
Hi Romrider,
Can you point me in the direction where to insert this code in my card config?
Thx,
JurgenHi Bogda,
This is not working for me, because I don’t handle active entities in my button.
Thx,
JurgenThat goes as an option inside button-card. He wrote the exact code. All you need to do is copy and paste it and change colors by chaning:
Change
COLOR_ACTIVEto the color you want (eg'rgb(255,0,0)'for matching hash and keepnullor replace with another color for non-matching hash
I highly advise you to read the documents first, like I advised you in a different post. Without reading the documentations, you have no idea why and what you are doing. Coping and pasting code will only get you so far.
custom-cards/button-card: 
Lovelace button-card for home assistant (github.com)
Btw, for now I would wait using this style. As you can read one post above you, it will not update the card when using tap_action right now.
Thanks! Would it also be possible to have something like this that (instead of hash) looks at the url (before hash)? For a different project (that doesn’t rely on state-switch), I want to reflect button styles based on the page itself. So I can use templates instead of copying the card to every dashboard.
yes, that’s very easy, and looks like the hash template above window.location.pathname.split('/')[2] (btw, you know you can check that in the inspector?)
using this button_template:
button_shortcut_menu:
tooltip: >
[[[ function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
}
return capitalizeFirstLetter(variables.tooltip.replace('_',' ')); ]]]
variables:
# dashboard: >
# [[[ return window.location.pathname.split('/')[1]; ]]]
view: >
[[[ return window.location.pathname.split('/')[2]; ]]]
size: 25px
styles:
tooltip:
- color: var(--text-color-off)
- font-size: 10px
- background: var(--background-color-off)
# - opacity: 0.5
- transition: opacity 0.5s
- padding: 5px
icon:
- color: var(--secondary-text-color)
card:
- box-shadow: none
- background: >
[[[ return variables.view == variables.path
? 'var(--secondary-background-color)' : 'var(--card-background-color)'; ]]]
I color several relevant parts in my menu buttons, but also set icons and navigation paths etc:
a button using that:
- type: custom:button-card
template: button_shortcut_menu
variables:
path: home
tooltip: >
[[[ return variables.view == variables.path
? 'Hassio' : 'Home'; ]]]
icon: >
[[[ return variables.view == variables.path
? 'mdi:home-assistant' : 'mdi:home'; ]]]
tap_action:
action: navigate
navigation_path: >
[[[ return variables.view == variables.path
? '/ui-data/home_assistant' : '/lovelace/home'; ]]]
styles:
icon:
- color: >
[[[ return (states['sensor.count_alerts_notifying'].state > 0)
? 'red': 'green'; ]]]
state:
- operator: template
value: >
[[[ return (states['sensor.count_alerts_notifying'].state > 0); ]]]
spin: true
you can still combine the state_switch to make it a bit more complex ;-=)
- type: custom:state-switch
entity: group
states:
admin:
type: custom:button-card
template: button_shortcut_menu
variables:
path: settings
tooltip: >
[[[ return variables.view == variables.path
? 'Energy' : 'Settings'; ]]]
icon: >
[[[ return variables.view == variables.path
? 'mdi:flash' : 'mdi:tools'; ]]]
tap_action:
action: navigate
navigation_path: >
[[[ return variables.view == variables.path
? '/ui-data/home_energy' : '/ui-settings/settings'; ]]]
user:
type: custom:button-card
template: button_shortcut_menu
variables:
path: help
tooltip: Help
icon: mdi:help
tap_action:
action: navigate
navigation_path: /lovelace/help
3 Likes
That is very thorough and detailed piece of code 
! Thanks a lot, will check it all out and play with it.
When custom header was dropped a few months ago, I created my own version with button card inside a horizontal stack, using it at the bottom as a sticky and disbaling the original header. It works great, but I want to streamline the code, so it’s easier to maintane and change if needed.
Thanks for your code and suggestions!