Setting aspect ratio to 1.6/1 shows buttons at correct size now BUT the icons are too small and setting the size is ignored. (again this is 0.110)
Interestingly, the left 2 that have the icons correct size are the core button card and the rest are all custom-button. Even the Start Addons button is custom but it’s using an image…
EDIT: just checked my mobile and that aspect ratio still makes the buttons too small. Looks like we need a fix or advice from Romrider.
I think maybe I found a small bug, on the mobile app if I have something like this:
aspect_ratio: 1/1
color: 'rgb(28, 128, 199)'
double_tap_action:
action: more-info
entity: switch.officefan_switch
icon: 'mdi:air-humidifier'
name: Humidifier
show_state: true
state:
- color: var(--disabled-text-color)
value: 'off'
- color: 'rgb(253, 216, 53)'
value: 'on'
lock:
enabled: true
type: 'custom:button-card'
with lock: enabled: true the button in the Home Assistant mobile app actually shows feedback when you push it, but without the lock: enabled: true I get no feedback when pushing the button.
Thanks @RomRider. I do appreciate the help. This is clearer to understand and I try and adapt this with my animated icons also.
Cheers.
Ok I removed the decluttering card templates and now use only button card templates. That eliminates a possible source. My issue persists though, with some cards randomly not being colored green as they should. Inconsistent results and I cannot fingure out why. Screenshot & Code below.
background: center / cover no-repeat url("/local/background-15.gif") fixed
style: &buttonCardStyle |
ha-card {
background-image: url("/local/cardbackK.png");
background-color: rgba(50,50,50,0.3);
background-repeat: no-repeat;
background-size: 100% 100%;
color: '#999999';
border-radius: 0;
}
style: &headerStyle |
ha-card {
background-color: rgba(66, 134, 244, 1);
background-image: url("/local/cardbackK.png");
background-repeat: no-repeat;
background-size: 100% 100%;
font-size: 20pt;
text-align: center;
}
button_card_templates:
zigbee_status_glance:
## BASE TEMPLATE
style: *buttonCardStyle
type: custom:button-card
tap_action:
action: none
show_label: true
show_name: true
show_icon: false
show_state: false
color_type: card
color: rgba(0, 128, 20, 1) # Green
styles:
name:
- font-size: 12px
- color: white
label:
- font-size: 18px
- color: white
- font-weight: bold
zigbee_linkquality_glance:
## 2nd Template Applied After Base Template
label: '[[[ return entity.attributes.linkquality + "%" ]]]'
state:
- operator: template
value: '[[[ return entity.attributes.linkquality < 50 ]]]'
color: rgba(200, 200, 0, 1) # Yellow
- operator: template
value: '[[[ return entity.attributes.linkquality < 30 ]]]'
color: rgba(200, 0, 0, 1) # Red
zigbee_battery_glance:
## 2nd Template Applied After Base Template
label: '[[[ return entity.attributes.battery + "%" ]]]'
state:
- operator: template
value: '[[[ return entity.attributes.battery < 30 ]]]'
color: rgba(200, 200, 0, 1) # Yellow
- operator: template
value: '[[[ return entity.attributes.battery < 20 ]]]'
color: rgba(200, 0, 0, 1) # Red
views:
- title: System
path: System
badges: []
cards:
- type: markdown
title:
content: Zigbee Link Quality
style: *headerStyle
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
template:
- zigbee_status_glance
- zigbee_linkquality_glance
entity: binary_sensor.master_bedroom_motion
name: MBR Motion
- type: custom:button-card
template:
- zigbee_status_glance
- zigbee_linkquality_glance
entity: sensor.nursery_therm_temperature
name: Nursery Therm
- type: custom:button-card
template:
- zigbee_status_glance
- zigbee_linkquality_glance
entity: sensor.living_room_therm_temperature
name: Living Rm Therm
- type: custom:button-card
template:
- zigbee_status_glance
- zigbee_linkquality_glance
entity: binary_sensor.nursery_motion
name: Nursery Motion
- type: custom:gap-card
- type: markdown
title:
content: Zigbee Battery
style: *headerStyle
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
template:
- zigbee_status_glance
- zigbee_battery_glance
entity: binary_sensor.master_bedroom_motion
name: MBR Motion
- type: custom:button-card
template:
- zigbee_status_glance
- zigbee_battery_glance
entity: sensor.nursery_therm_temperature
name: Nursery Therm
- type: custom:button-card
template:
- zigbee_status_glance
- zigbee_battery_glance
entity: sensor.living_room_therm_temperature
name: Living Rm Therm
- type: custom:button-card
template:
- zigbee_status_glance
- zigbee_battery_glance
entity: binary_sensor.nursery_motion
name: Nursery Motion
When you compare a state of a sensor with a number, it’s better to force the conversion to a number. For eg:
return Number(entity.attributes.linkquality) < 50
This is probably why you have inconsistent results (it tries to compare a string with a number)
Edit:
Also, the state object is evaluated in the order of the array: so if you first test that the value is < 30 and then < 20, it will stop at the < 30 because < 20 is also < 30. You’ll have to swap them 
Is it possible to use tap_action: navigate to move between dashboards?
I don’t see why not… I have one that loads the Supervisor and one that loads HACS… so as long as you have the dashboard address it should work… the dashboard selection just loads a different URL after all.
Ok I’ll give it another go. I could not get it working before and thought it might be limited to paths in the current dashboard.
Ugh. tap_action, not tap action.
I see… You’re also mixing card-mod and button-card styles… that will have some undefined results…
What you’re doing here:
style: &buttonCardStyle |
ha-card {
background-image: url("/local/cardbackK.png");
background-color: rgba(50,50,50,0.3);
background-repeat: no-repeat;
background-size: 100% 100%;
color: '#999999';
border-radius: 0;
}
can be done with:
styles:
card:
- background-image: url("/local/cardbackK.png")
# - background-color: rgba(50,50,50,0.3) # I've removed this line as it's already defined through the color property color: rgba(0, 128, 20, 1) # Green
- background-repeat: no-repeat
- background-size: 100% 100%
- color: '#999999'
- border-radius: 0
Also don’t forget to remove the style: *buttonCardStyle line.
Can someone share Button with Dimmer template. I having a hard time with mine.
I think I found a bug. The styles are not applied based on the entity id domain. In this case, binary_sensor.* does not act the same as sensor.*
I’ve whittled the config down to the bare bones.
background: center / cover no-repeat url("/local/background-15.gif") fixed
button_card_templates:
zigbee_status_glance:
## BASE TEMPLATE
#style: *buttonCardStyle
type: custom:button-card
tap_action:
action: none
show_label: true
show_name: true
show_icon: false
show_state: false
color_type: card
color: rgb(0, 128, 20)
styles:
name:
- font-size: 12px
- color: white
label:
- font-size: 18px
- color: white
- font-weight: bold
views:
- title: System
path: System
badges: []
cards:
- type: custom:button-card
template:
- zigbee_status_glance
entity: binary_sensor.master_bedroom_motion
name: MBR Motion
- type: custom:button-card
template:
- zigbee_status_glance
entity: sensor.nursery_therm_temperature
name: Nursery Therm
- type: custom:button-card
template:
- zigbee_status_glance
entity: binary_sensor.nursery_motion
name: Nursery Motion
- type: custom:button-card
template:
- zigbee_status_glance
entity: sensor.living_room_therm_temperature
name: Living Rm Therm
- type: custom:button-card
template:
- zigbee_status_glance
entity: sensor.greenhouse_therm_temperature
name: Greenhouse Therm
- type: custom:button-card
template:
- zigbee_status_glance
entity: sensor.laundry_room_button_click
name: Laundry Rm Button
- type: custom:button-card
template:
- zigbee_status_glance
entity: binary_sensor.laundry_rm_water_leak
name: Laundry Rm Water
- type: custom:button-card
template:
- zigbee_status_glance
entity: binary_sensor.washing_machine_door_contact
name: Washing Machine Door
- type: custom:gap-card
Thanks for the quick fix! Just updated and everything’s back to normal again here.
I’m missing the animation on long press of the button.
Anyway thanks for the quick fix. 
It’s not a bug. A binary sensor has an on/off state, a sensor doesn’t the default coloring scheme is not the same for both.
I wouldn’t use color nor color_mode.
Use this in the main config (default when no state matches) or in state
styles:
card:
- background-color: xxx
Interesting, I didn’t touch anything regarding this animation 
Absolutly fantasic, that was it! Thank you so much for not only the most powerful lovelace card but also regularly supporting the users!
Always happy to help 
Hey there,
i want to size my card relative. In the end i want to get a card that works on mobile and on desktop.
This is my code:
icon: 'fas:couch'
color: 'rgb(47, 186, 229)'
name: Wohnzimmer
entity: sensor.heizung_wohnzimmer_temperature
label: |
[[[ return '°C: ' + entity.state; ]]]
show_label: true
styles:
card:
- width: 300%
- height: 80%
- font-size: 16px
- font-weight: bold
name:
- justify-self: center
- margin-bottom: 25px
grid:
- position: relative
The width works correct, the height not. Do you have a hint for me?
Nic
I’d try with aspect_ratio: 30/8 instead of width and height.