yep, as @RomRider said, you’re defining the height/width. Remove that and use the aspect ratio field.
Can You be more specific? Can You show me how to use aspect_ratio to achieve similar effect as I’ve done with width and height parameters ?
You seem to be putting this on a pedestal. It’s very simple. Try it. Remove height and width from from the card style, add aspect_ratio: 1/1 to the root level of the card. Your top card has an aspect ratio of 2/1.
I don’t get it. Can you show me this on my code?
If I enter aspect_ratio I’ve got huge buttons:
Sure there is no space but cards are huge.
I want small 230x100px cards without spaces around
Edit:
OK I’ve manage something like that:
But it is not exactly what I want. Width of cards is too big.
Is there any way to shrink it by 20%?
You should use layout-card if you want to reduce the size of each the columns.
Thanks for this. I managed to work this out on my own but think yours is better. For those who want an image they can try mine.
type: 'custom:button-card'
entity: cover.x
custom_fields:
down:
card:
type: 'custom:button-card'
show_name: false
size: 60%
entity: |
[[[ return entity.entity_id; ]]]
icon: 'mdi:arrow-down'
tap_action:
action: call-service
service: cover.close_cover
service_data:
entity_id: |
[[[ return entity.entity_id; ]]]
up:
card:
type: 'custom:button-card'
size: 60%
entity: |
[[[ return entity.entity_id; ]]]
icon: 'mdi:arrow-up'
show_name: false
tap_action:
action: call-service
service: cover.open_cover
service_data:
entity_id: |
[[[ return entity.entity_id; ]]]
stop:
card:
type: 'custom:button-card'
size: 60%
entity: |
[[[ return entity.entity_id; ]]]
icon: 'mdi:stop'
show_name: false
tap_action:
action: call-service
service: cover.stop_cover
service_data:
entity_id: |
[[[ return entity.entity_id; ]]]
styles:
grid:
- grid-template-areas: '"i i i i i" "n n n n n" ". up stop down ."'
- grid-template-rows: min-content 1fr 2fr
- grid-template-columns: 5% 1fr 1fr 1fr 5%
card:
- max-width: 150px
- max-height: 150px
- padding-bottom: 0
2 Likes
Thank you. I will try layout-card.
Hi,
I have this code:
color: auto
color_type: card
custom_fields:
- card:
entity: '[[[ return entity.entity_id ]]]'
full_row: true
hide_state: false
hide_when_off: false
styles:
grid:
- grid-template-areas: '"n" "i" "l" "slider"'
- grid-template-columns: 1fr
type: 'custom:slider-entity-row'
default_color: 'rgb(255, 233, 155)'
entity: light.yeelight
icon: 'mdi:lightbulb'
type: 'custom:button-card'
and look like this: 
is it possible set more slider for yeelight? I can’t do that.
I need this but inside the button. 
Does anyone know how to fix this code, I get a syntax error:
state_display: '[[[ if (entity.state === "idle") return sensor.irrigation_watering_day; else return null ]]]'
The return sensor.irrigation_watering_day is incorrect but I can’t figure out how to fix it.
Try
states['sensor.irrigation_watering_day'].state
1 Like
Hey there,
i am still new to this awesome stuff and have a question.
I would like to have buttons for up and down in the following code:
icon: 'mdi:window-shutter'
size: 60%
aspect_ratio: 1/0.3
styles:
card:
- border-radius: 12px
- '--paper-card-background-color': lightgrey
icon:
- grid-column: 1
- grid-row: 1 / 4
- height: 60px
- width: 60px
- border-radius: 100%
- background: gold
label:
- font-size: 120px
grid:
- grid-template-areas: '"i s" "i vorn" "i links" "i rechts"'
- grid-template-columns: 30% 70%
- grid-template-rows: 25% 25% 25% 25%
custom_fields:
vorn:
- align-self: start
- justify-self: start
- font-size: 10px
- line-height: 10%
- color: var(--secondary-text-color)
links:
- align-self: start
- justify-self: start
- font-size: 10px
- line-height: 10%
- color: var(--secondary-text-color)
rechts:
- align-self: start
- justify-self: start
- font-size: 10px
- line-height: 10%
- color: var(--secondary-text-color)
custom_fields:
vorn: |
[[[
return `<ha-icon
icon="mdi:window-shutter"
style="; --mdc-icon-size: 28px; color: var(--primary-line-color);">
</ha-icon><span>${states['cover.rollo_wohnzimmer_vorn'].attributes.friendly_name}: <span>${states['cover.rollo_wohnzimmer_vorn'].attributes.level }*100 offen </span> </span>`
]]]
links: |
[[[
return `<ha-icon
icon="mdi:window-shutter"
style="; --mdc-icon-size: 28px; color: var(--primary-line-color);">
</ha-icon><span>${states['cover.rollo_wohnzimmer_hinten_links'].attributes.friendly_name}: <span>${states['cover.rollo_wohnzimmer_vorn'].attributes.level }*100 offen </span> </span>`
]]]
rechts: |
[[[
return `<ha-icon
icon="mdi:window-shutter"
style="; --mdc-icon-size: 28px; color: var(--primary-line-color);">
</ha-icon><span>${states['cover.rollo_wohnzimmer_hinten_rechts'].attributes.friendly_name}: <span>${states['cover.rollo_wohnzimmer_vorn'].attributes.level }*100 offen </span> </span>`
]]]
I made a scribble of it:
How could i achieve that?
see NovaG example code above, it has the arrows up and down and adds them to a button card.
First, your code is wrong because it’s missing slider below custom_fields and some things do not have the correct indentation (copy paste error?)
If you want to add more sliders, just do it the same way as you did it already and add new lines to the grid-template-areas:
color: auto
color_type: card
custom_fields:
slider:
card:
entity: '[[[ return entity.entity_id ]]]'
full_row: true
hide_state: false
hide_when_off: false
type: 'custom:slider-entity-row'
slider2:
card:
entity: OTHER_ENTITY
full_row: true
hide_state: false
hide_when_off: false
type: 'custom:slider-entity-row'
styles:
grid:
- grid-template-areas: '"n" "i" "l" "slider" "slider2"'
- grid-template-columns: 1fr
entity: light.yeelight
icon: 'mdi:lightbulb'
type: 'custom:button-card'
Based on what you want to do, the best way will be to use position: absolute on those 2 custom_fields and use inspiration from this post
Hi RomRider,
for sure i am just to new to all this things. I tried to use the base of the mentioned post but in the end i did not achieve to get the up and down arrows for all three entries.
To be honest i just ended up in a mess card ;-(
type: 'custom:button-card'
icon: 'mdi:window-shutter'
size: 60%
aspect_ratio: 1/0.3
styles:
card:
- border-radius: 12px
- '--paper-card-background-color': lightgrey
icon:
- grid-column: 1
- grid-row: 1 / 4
- height: 60px
- width: 60px
- border-radius: 100%
- background: gold
label:
- font-size: 120px
grid:
- grid-template-areas: '"i s" "i vorn" "i links" "i rechts" "i runter" "i rauf" "i stop"'
- grid-template-columns: 30% 10% 10% 10% 10% 20%
- grid-template-rows: 25% 25% 25% 25%
custom_fields:
vorn:
- align-self: start
- justify-self: start
- font-size: 10px
- line-height: 10%
- color: var(--secondary-text-color)
links:
- align-self: start
- justify-self: start
- font-size: 10px
- line-height: 10%
- color: var(--secondary-text-color)
rechts:
- align-self: start
- justify-self: start
- font-size: 10px
- line-height: 10%
- color: var(--secondary-text-color)
runter:
- align-self: start
- justify-self: start
- font-size: 10px
- line-height: 10%
- color: var(--secondary-text-color)
- position: absolute
custom_fields:
vorn: |
[[[
return `<ha-icon
icon="mdi:window-shutter"
style="; --mdc-icon-size: 28px; color: var(--primary-line-color);">
</ha-icon><span>${states['cover.rollo_wohnzimmer_vorn'].attributes.friendly_name}: <span>${states['cover.rollo_wohnzimmer_vorn'].attributes.level }*100 offen </span> </span>`
]]]
links: |
[[[
return `<ha-icon
icon="mdi:window-shutter"
style="; --mdc-icon-size: 28px; color: var(--primary-line-color);">
</ha-icon><span>${states['cover.rollo_wohnzimmer_hinten_links'].attributes.friendly_name}: <span>${states['cover.rollo_wohnzimmer_vorn'].attributes.level }*100 offen </span> </span>`
]]]
rechts: |
[[[
return `<ha-icon
icon="mdi:window-shutter"
style="; --mdc-icon-size: 28px; color: var(--primary-line-color);">
</ha-icon><span>${states['cover.rollo_wohnzimmer_hinten_rechts'].attributes.friendly_name}: <span>${states['cover.rollo_wohnzimmer_vorn'].attributes.level }*100 offen </span> </span>`
]]]
runter:
card:
type: 'custom:button-card'
show_name: false
size: 06%
entity: rollo_wohnzimmer_vorn
position: absolute
icon: 'mdi:arrow-down'
tap_action:
action: call-service
service: cover.close_cover
service_data:
entity_id: rollo_wohnzimmer_vorn
hoch:
card:
type: 'custom:button-card'
size: 60%
entity: rollo_wohnzimmer_vorn
position: absolute
icon: 'mdi:arrow-up'
show_name: false
tap_action:
action: call-service
service: cover.open_cover
service_data:
entity_id: rollo_wohnzimmer_vorn
stop:
card:
type: 'custom:button-card'
size: 60%
entity: rollo_wohnzimmer_vorn
position: absolute
icon: 'mdi:stop'
show_name: false
tap_action:
action: call-service
service: cover.stop_cover
service_data:
entity_id: rollo_wohnzimmer_vorn
It’s almost correct 
That should give you something to work with:
type: 'custom:button-card'
icon: 'mdi:window-shutter'
size: 60%
aspect_ratio: 1/0.3
styles:
card:
- border-radius: 12px
- '--paper-card-background-color': lightgrey
icon:
- grid-column: 1
- grid-row: 1 / 4
- height: 60px
- width: 60px
- border-radius: 100%
- background: gold
label:
- font-size: 120px
grid:
- grid-template-areas: '"i s" "i vorn" "i links" "i rechts"'
- grid-template-columns: 30% 70%
- grid-template-rows: 25% 25% 25% 25%
- position: relative
custom_fields:
vorn:
- align-self: start
- justify-self: start
- font-size: 10px
- line-height: 10%
- color: var(--secondary-text-color)
links:
- align-self: start
- justify-self: start
- font-size: 10px
- line-height: 10%
- color: var(--secondary-text-color)
rechts:
- align-self: start
- justify-self: start
- font-size: 10px
- line-height: 10%
- color: var(--secondary-text-color)
runter:
- color: var(--secondary-text-color)
- position: absolute
- bottom: 0% # Play with those to move them around
- left: 95% # Play with those to move them around
hoch:
- color: var(--secondary-text-color)
- position: absolute
- top: 0% # Play with those to move them around
- left: 95% # Play with those to move them around
stop:
- color: var(--secondary-text-color)
- position: absolute
- top: 50% # Play with those to move them around
- left: 95% # Play with those to move them around
custom_fields:
vorn: |
[[[
return `<ha-icon
icon="mdi:window-shutter"
style="; --mdc-icon-size: 28px; color: var(--primary-line-color);">
</ha-icon><span>${states['cover.rollo_wohnzimmer_vorn'].attributes.friendly_name}: <span>${states['cover.rollo_wohnzimmer_vorn'].attributes.level }*100 offen </span> </span>`
]]]
links: |
[[[
return `<ha-icon
icon="mdi:window-shutter"
style="; --mdc-icon-size: 28px; color: var(--primary-line-color);">
</ha-icon><span>${states['cover.rollo_wohnzimmer_hinten_links'].attributes.friendly_name}: <span>${states['cover.rollo_wohnzimmer_vorn'].attributes.level }*100 offen </span> </span>`
]]]
rechts: |
[[[
return `<ha-icon
icon="mdi:window-shutter"
style="; --mdc-icon-size: 28px; color: var(--primary-line-color);">
</ha-icon><span>${states['cover.rollo_wohnzimmer_hinten_rechts'].attributes.friendly_name}: <span>${states['cover.rollo_wohnzimmer_vorn'].attributes.level }*100 offen </span> </span>`
]]]
runter:
card:
type: 'custom:button-card'
show_name: false
size: 06%
entity: rollo_wohnzimmer_vorn
icon: 'mdi:arrow-down'
tap_action:
action: call-service
service: cover.close_cover
service_data:
entity_id: rollo_wohnzimmer_vorn
hoch:
card:
type: 'custom:button-card'
size: 60%
entity: rollo_wohnzimmer_vorn
icon: 'mdi:arrow-up'
show_name: false
tap_action:
action: call-service
service: cover.open_cover
service_data:
entity_id: rollo_wohnzimmer_vorn
stop:
card:
type: 'custom:button-card'
size: 60%
entity: rollo_wohnzimmer_vorn
icon: 'mdi:stop'
show_name: false
tap_action:
action: call-service
service: cover.stop_cover
service_data:
entity_id: rollo_wohnzimmer_vorn
With absolute positioning you don’t have to add them to the grid.
Hi RomRider,
thanks for helping once again.
I tried the code and duplicated the custom fields three times. In the end the buttons work correct but i can´t arrange them in the lines. The buttons theme to overwrite the labeltext and the other buttons:
type: 'custom:button-card'
icon: 'mdi:window-shutter'
aspect_ratio: 1/0.3
styles:
card:
- border-radius: 12px
- '--paper-card-background-color': lightgrey
icon:
- grid-column: 1
- grid-row: 1 / 4
- height: 60px
- width: 60px
- border-radius: 100%
- background: gold
label:
- font-size: 120px
grid:
- grid-template-areas: '"i s" "i vorn" "i links" "i rechts"'
- grid-template-columns: 30% 70%
- grid-template-rows: 25% 25% 25% 25%
- position: relative
custom_fields:
vorn:
- align-self: start
- justify-self: start
- font-size: 10px
- line-height: 10%
- color: var(--secondary-text-color)
links:
- align-self: start
- justify-self: start
- font-size: 10px
- line-height: 10%
- color: var(--secondary-text-color)
rechts:
- align-self: start
- justify-self: start
- font-size: 10px
- line-height: 10%
- color: var(--secondary-text-color)
runter1:
- position: absolute
- top: 40%
- left: 65%
hoch1:
- color: var(--secondary-text-color)
- position: absolute
- left: 85%
- top: 5%
stop1:
- color: var(--secondary-text-color)
- position: absolute
- top: 10%
- left: 75%
runter2:
- color: var(--secondary-text-color)
- position: absolute
- top: 0%
- left: 65%
hoch2:
- color: green
- position: absolute
- top: 0%
- left: 85%
stop2:
- color: green
- position: absolute
- top: 60%
- left: 75%
runter3:
- color: red
- position: absolute
- top: 90%
- left: 65%
hoch3:
- color: red
- position: absolute
- top: 10%
- left: 85%
stop3:
- color: var(--primary-line-color);
- position: absolute
- top: 30%
- left: 75%
custom_fields:
vorn: |
[[[
return `<ha-icon
icon="mdi:window-shutter"
style="; --mdc-icon-size: 28px; color: var(--primary-line-color);">
</ha-icon><span>${states['cover.rollo_wohnzimmer_vorn'].attributes.friendly_name}: <span>${states['cover.rollo_wohnzimmer_vorn'].attributes.level }*100 offen </span> </span>`
]]]
links: |
[[[
return `<ha-icon
icon="mdi:window-shutter"
style="; --mdc-icon-size: 28px; color: var(--primary-line-color);">
</ha-icon><span>${states['cover.rollo_wohnzimmer_hinten_links'].attributes.friendly_name}: <span>${states['cover.rollo_wohnzimmer_vorn'].attributes.level }*100 offen </span> </span>`
]]]
rechts: |
[[[
return `<ha-icon
icon="mdi:window-shutter"
style="; --mdc-icon-size: 28px; color: var(--primary-line-color);">
</ha-icon><span>${states['cover.rollo_wohnzimmer_hinten_rechts'].attributes.friendly_name}: <span>${states['cover.rollo_wohnzimmer_vorn'].attributes.level }*100 offen </span> </span>`
]]]
runter1:
card:
type: 'custom:button-card'
show_name: false
size: 10%
entity: rollo_wohnzimmer_vorn
icon: 'mdi:arrow-down'
tap_action:
action: call-service
service: cover.close_cover
service_data:
entity_id: rollo_wohnzimmer_vorn
hoch1:
card:
type: 'custom:button-card'
size: 10%
entity: rollo_wohnzimmer_vorn
icon: 'mdi:arrow-up'
show_name: false
tap_action:
action: call-service
service: cover.open_cover
service_data:
entity_id: rollo_wohnzimmer_vorn
stop1:
card:
type: 'custom:button-card'
size: 10%
entity: rollo_wohnzimmer_vorn
icon: 'mdi:stop'
show_name: false
tap_action:
action: call-service
service: cover.stop_cover
service_data:
entity_id: rollo_wohnzimmer_vorn
runter2:
card:
type: 'custom:button-card'
show_name: false
size: 10%
entity: rollo_wohnzimmer_vorn
icon: 'mdi:arrow-down'
tap_action:
action: call-service
service: cover.close_cover
service_data:
entity_id: rollo_wohnzimmer_vorn
hoch2:
card:
type: 'custom:button-card'
size: 10%
entity: rollo_wohnzimmer_vorn
icon: 'mdi:arrow-up'
show_name: false
tap_action:
action: call-service
service: cover.open_cover
service_data:
entity_id: cover.rollo_wohnzimmer_vorn
stop2:
card:
type: 'custom:button-card'
size: 10%
entity: rollo_wohnzimmer_vorn
icon: 'mdi:stop'
show_name: false
tap_action:
action: call-service
service: cover.stop_cover
service_data:
entity_id: cover.rollo_wohnzimmer_vorn
runter3:
card:
type: 'custom:button-card'
show_name: false
size: 10%
entity: rollo_wohnzimmer_vorn
icon: 'mdi:arrow-down'
tap_action:
action: call-service
service: cover.close_cover
service_data:
entity_id: cover.rollo_wohnzimmer_vorn
hoch3:
card:
type: 'custom:button-card'
size: 10%
entity: rollo_wohnzimmer_vorn
icon: 'mdi:arrow-up'
show_name: false
tap_action:
action: call-service
service: cover.open_cover
service_data:
entity_id: cover.rollo_wohnzimmer_vorn
stop3:
card:
type: 'custom:button-card'
size: 10%
entity: rollo_wohnzimmer_vorn
icon: 'mdi:stop'
show_name: false
tap_action:
action: call-service
service: cover.stop_cover
service_data:
entity_id: cover.rollo_wohnzimmer_vorn
Furthermore the buttons seem to have different sizes even though they are defined all the same way.
COuld you help me once again and another question: is the way i am going on right or is there a easier way than duplicate the custom_fields?
Tried to find the answer in the thread, but it is a long post…
I have a set of binary sensors (doors open, windows open, lights on, smoke alerts, etc…). I want to combine the button card with a conditional card, so that the card is only visible when the sensor turns to on. Do I need to create a card for each sensor or can I use a “*” in some way to include them all in one shot so that only then ones that are “on” are visible on the page ?. Sort of mimicking what entity-filter card does but with more flexibility on the look & feel ?
my code below, for one entity, I have 12 more…
card:
color: red
entity: binary_sensor.smoke_gst_bath
icon: 'mdi:alert'
name: Guest Bath Smoke
state:
- color: transparent
label: ''
styles:
card:
- animation: none
value: 'off'
styles:
card:
- animation: blink 2s ease infinite
- height: 200px
type: 'custom:button-card'
conditions:
- entity: binary_sensor.smoke_gst_bath
state: 'on'
type: conditional
Alternatively, can the button-card be nested in the auto-entities card ?
This is what I have working for my cameras batteries, works well but the look is kind of basic. I am thinking only the batteries that are below say 45% would show with a warning button card ?
ok thanks, sorry for getting back to you with some delay.
most importantly would be getting this right:
this is supposed to be a grid of 4 (which I now create by default by having 4 buttons with aspect ratio 1/1 on a single line, and create a gap with an empty card. The smaller button above those should also be 2 buttons wide, this doesnt work with the button card setup though, using a blank card, a title button with an adapted ratio, and again an empty card. The system sees it still as 3 cards, and dives these in 3ds perfectly…
- type: horizontal-stack
cards:
- type: custom:button-card
color_type: blank-card
- type: 'custom:button-card'
entity: light.library_lights
template: button_title_counter
aspect_ratio: 4/1
label: Library
- type: custom:button-card
color_type: blank-card
- type: horizontal-stack
cards:
- type: custom:button-card
template: button_light
entity: light.hobby_corner
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
template: button_light
name: Gamers Tv
entity: light.tv_backlight
Would you be able to show me how to do that with the layout card?
These cards look incredible! I am starting a make-over of my lovelace and tried to follow this. I don’t get your code to work as it should, because of my lack of understanding:
- What is this first image (‘transparent_’ ~ ‘to’.join(ratio.split(’/’)) ~ ‘.png’). Is this an actual image I need to create, and what image should that actually be?
- Without the image above, it functions, but the default scaling is off (the info cicle in the top left is moved up and cut-off for a part. with ration=1.2/1 I get all info on the button, but I would expect this to work with the default 1/1, not?
- I cannot get the graph to display (might be connected to the missing image above). Any help appreciated:
My simple lovelace code using your code as-is:
# lovelace_gen
title: Test
icon: mdi:test-tube
cards:
- type: horizontal-stack
cards:
- !include
- '../includes/graph_button.yaml'
- imgratio: 1/1
entity: sensor.dsmr_reading_electricity_currently_delivered
color: '#ff3300'
ratio: 1.2/1
icon: mdi:flash
- !include
- '../includes/graph_button.yaml'
- imgratio: 1/1
entity: sensor.dsmr_reading_electricity_currently_delivered
color: '#ff3300'
ratio: 1/1
icon: mdi:flash
- !include
- '../includes/graph_button.yaml'
- imgratio: 1/1
entity: sensor.dsmr_reading_electricity_currently_delivered
color: '#ff3300'
ratio: 1/1
icon: mdi:flash
Since I updated to HA 0.110 I have some problems with button card. I use it in my Dwains Theme and inside the buttons I read and use a lot of states. Sometime when I enter a lovelace view I get:
https://camo.githubusercontent.com/d5efeddbc447390a5f685bf67719858ccd54457a/687474703a2f2f7075752e73682f46524c44462f333531663766663832362e706e67
https://github.com/custom-cards/button-card/issues/337
I also opened an issue for this, I hope you got time to look into this soon because now my theme won’t work in HA 0.100.* and I don’t got the time myself to look for the error and make a PR 