You’ll have to position your light card using position: absolute and remove it from the grid
I can use a template light yes but i would like use button card… Thanks
Thank i will try.
What do you mean by ‘remove it from the grid’?
Thanks i will try
edit:
color: auto
color_type: icon
entity: switch.salon_lampe1
icon: 'mdi:lightbulb-outline'
name: Yeelight
show_icon: true
show_label: false
show_last_changed: false
show_name: true
show_state: false
styles:
card:
- border-radius: 10px
- height: 200px
- width: 200px
- margin: 5px 5px 0px 11px
- padding: 0px 0px
custom_fields:
light:
- background-color: 'rgba(0, 0, 0, 0)'
- position: absolute
- left: 35px
- font-size: 15px
- line-height: 20px
- transform: scale(1.7)
grid:
- position: relative
icon:
- color: |
[[[
if ( (states['light.yeelight_001'].state
== 'on')
|| (states['switch.salon_lampe1'].state
== 'on')
) return 'green';
else return 'red';
]]]
name:
- position: absolute
- bottom: 10px
- font-variant: small-caps
- font-size: 14px
- color: red
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.salon_lampe1
custom_fields:
light:
card:
entity: light.yeelight_001
style: |
#info{
display: none;
}
ha-card {
box-shadow: none;
background: transparent;
}
.light-button{
display: none;
}
.more-info{
display: none;
}
type: light
type: 'custom:button-card'
give me this : 
I have now another problem :
The focus is on the custom_field and not on the entity_id of button card.
I can change the brightness but i click on the bulb, it’s not call the service.
If i remove card-mod style, i call the toggle light card action and not the call service of button card.
Have you an idea ? I would like to increase/decrease brightness with the slider and call service switch.toggle which is the action of button card…
Thanks
Try this out:
color: auto
color_type: icon
entity: switch.salon_lampe1
icon: 'mdi:lightbulb-outline'
name: Yeelight
show_icon: true
show_label: false
show_last_changed: false
show_name: true
show_state: false
styles:
card:
- border-radius: 10px
- height: 200px
- width: 200px
- margin: 5px 5px 0px 11px
- padding: 0px 0px
custom_fields:
light:
- background-color: 'rgba(0, 0, 0, 0)'
- position: absolute
- left: 35px
- font-size: 15px
- line-height: 20px
- transform: scale(1.7)
grid:
- position: relative
icon:
- z-index: 10
- color: |
[[[
if ( (states['light.yeelight_001'].state
== 'on')
|| (states['switch.salon_lampe1'].state
== 'on')
) return 'green';
else return 'red';
]]]
name:
- position: absolute
- bottom: 10px
- font-variant: small-caps
- font-size: 14px
- color: red
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.salon_lampe1
custom_fields:
light:
card:
entity: light.yeelight_001
style: |
#info{
display: none;
}
ha-card {
box-shadow: none;
background: transparent;
}
.light-button{
display: none;
}
.more-info{
display: none;
}
type: light
type: 'custom:button-card'
Just curious, why do you have both a switch and a light? It makes your config less cluttered if you always leave the switch on, and just toggle the light. Also I don’t see why not to use a template light, but maybe I’m missing something.
1 Like
I know. I agree with you. At home, I leave the switches on, but it’s for a friend who doesn’t like to leave the light bulbs on electrically … Thanks for your help and I will test as soon as I get home.
And for the template, he won’t use… 
thanks it works !
another day, another challenge…
trying to show a button, depending on the current dashboard (window.pathname)
- type: custom:button-card
template: button_shortcut_menu
icon: >
[[[ return (window.pathname == 'ui-settings/time_settings')
? 'mdi:remote-desktop' : states['sensor.weather_icon'].state ; ]]]
tap_action:
action: navigate
navigation_path: >
[[[ return (window.pathname == 'ui-settings/time_settings')
? '/ui-settings/developer' : '/lovelace/weer_klimaat' ; ]]]
variables:
path: >
[[[ (return window.pathname == 'ui-settings/time_settings')
? 'developer' : 'weer_klimaat' ; ]]]
but this doesnt work. (yet)
regular button in my menu bar is like:
- type: custom:button-card
template: button_shortcut_menu
icon: mdi:calendar
tap_action:
action: navigate
navigation_path: /lovelace/tijd_agenda
variables:
path: tijd_agenda
styles:
icon:
- color: >
[[[ return states['sensor.trash_color'].state ]]]
so I know the format is alright.
What should I change in the window.pathname templates to get this going?
thanks for having a look!
Try out adding a / to the start?
- type: custom:button-card
template: button_shortcut_menu
icon: >
[[[ return (window.pathname == '/ui-settings/time_settings')
? 'mdi:remote-desktop' : states['sensor.weather_icon'].state ; ]]]
tap_action:
action: navigate
navigation_path: >
[[[ return (window.pathname == '/ui-settings/time_settings')
? '/ui-settings/developer' : '/lovelace/weer_klimaat' ; ]]]
variables:
path: >
[[[ (return window.pathname == '/ui-settings/time_settings')
? 'developer' : 'weer_klimaat' ; ]]]
had 2 issues at least: a wrong js code, should be window.location.pathname and in my case moe specifically window.location.pathname.split('/')[1] to get the dahsboard url. Secondly, I had an incorrectly placed ‘(’ in the bottom variables path…
resulting in a corrected:
- type: custom:button-card
template: button_shortcut_menu
icon: >
[[[ return (window.location.pathname.split('/')[1] == 'ui-settings')
? 'mdi:remote-desktop' : states['sensor.weather_icon'].state ; ]]]
tap_action:
action: navigate
navigation_path: >
[[[ return (window.location.pathname.split('/')[1] == 'ui-settings')
? '/ui-settings/developer' : '/lovelace/weer_klimaat' ; ]]]
variables:
path: >
[[[ return (window.location.pathname.split('/')[1] == 'ui-settings')
? 'developer' : 'weer_klimaat' ; ]]]
this is working fine now, but still feels somewhat complex, having to repeat the template on all options. did post in the state-switch thread, hope that could simplify things a bit, if at all possible, now or in the future.
Use a variable 
variables:
is_path_matching: "[[[ return window.location.pathname.split('/')[1] == 'ui-settings' ]]]"
tap_action:
action: navigate
navigation_path: >
[[[ return variables.is_path_matching ? '/ui-settings/developer' : '/lovelace/weer_klimaat' ]]]
ha, yes, that’s cool of course. Makes it easier on the eye indeed. Will adjust like that.
Thanks!
Won’t that interfere with the variable option I already use in the button itself?
Still, I’d need that for all options… so it wont really make it much shorter.
- type: custom:button-card
template: button_shortcut_menu
variables:
dashboard: >
[[[ return window.location.pathname.split('/')[1] == 'ui-settings' ]]]
path: >
[[[ return variables.dashboard ? 'developer' : 'home_energy'; ]]]
icon: >
[[[ return variables.dashboard ? 'mdi:remote-desktop' : 'mdi:flash'; ]]]
tap_action:
action: navigate
navigation_path: >
[[[ return variables.dashboard
? '/ui-settings/developer' : '/ui-data/home_energy'; ]]]
# variables:
# path: >
# [[[ return variables.dashboard ? 'developer' : 'home_energy'; ]]]
I’d hoped something like this would have been possible:
- type: custom:button-card
template: button_shortcut_menu
variables:
is_path_matching: >
[[[ return window.location.pathname.split('/')[1] == 'ui-settings' ]]]
tap_action:
action: navigate
state:
- operator: template
value: >
[[[ return variables.is_path_matching ]]
icon: mdi:remote-desktop
navigation_path: /ui-settings/developer
variables:
path: developer
- default:
icon: states['sensor.weather_icon'].state
navigation_path: /lovelace/weer_klimaat
variables:
path: weer_klimaat
fyi this is my template button_shortcut_menu:
button_shortcut_menu:
variables:
view: >
[[[ return window.location.pathname.split('/').slice(-1) ]]]
size: 25px
styles:
icon:
- color: var(--secondary-text-color)
card:
- background: >
[[[ return variables.view == variables.path
? 'var(--secondary-background-color)' : 'var(--card-background-color)';
]]]
How do i split the state text in 2 rows? <br> works with name but how to do it with state? 
You can’t have a variable that uses another variable that’s why you have this error.
You can use state_display with templates for that 
a bit late to the party on this subject, but has it been added to the butt0n-card options? cant find anything on it, and need some hovering popup texts, just like with Custom Header:
sorry If I missed it after reading through +3000 posts…
They are called “tooltip”. You can try adding the HTML using a template
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
aww, too bad, feared as much… wouldn’t there be a way around this? maybe introducing a config_variable next to the variables with now have?