I have experienced this in the past (here) when using a button is inside a button. Using another type of card inside the button card worked for me in the past, but I like your resolution. Nice workaround!
The solution of the helper buttons with automations was something you had shared in the past, and I took the menu code from here:
https://gist.github.com/vlaraort/b74d6c3113f1a031245d27329e1f22f7
1 Like
Right now Iām facing another difficulty, perhaps simpler than the previous one, but Iām having trouble solving itā¦
I want to have two font sizes and have them centered in the middle of the card.
type: custom:button-card
icon: mdi:home-thermometer
entity: sensor.temperatura_media_casa
show_entity_picture: true
show_name: false
show_state: true
tap_action:
action: more-info
styles:
icon:
- width: 22px
- color: |-
[[[
var state = states['sensor.temperatura_media_casa'].state;
if (state <= 18) {
return 'rgb(100,149,237)'; //blue
} else if (state <= 24) {
return 'rgb(244,208,63)'; //yellow
} else {
return 'rgb(231,76,60)'; //red
}
]]]
img_cell:
- background: |-
[[[
var state = states['sensor.temperatura_media_casa'].state;
if (state <= 18) {
return 'rgba(100,149,237,0.2)'; //blue_t
} else if (state <= 24) {
return 'rgba(244,208,63,0.2)'; //yellow_t
} else {
return 'rgba(231,76,60,0.2)'; //red_t
}
]]]
- border-radius: 100%
- width: 30px
- height: 30px
state:
- font-size: 14px
- font-weight: 500
card:
- border-radius: 100px
- width: 100%
- height: 39px
- background: rgb(39,39,39)
- box-shadow: none
- padding: 0px 10px 0px 5px
grid:
- grid-template-columns: min-content 1fr
- grid-template-areas: |
"i s"
- gap: 0px 10px;
That is a tough one. They are grouped together.
i have tested using label and name with template but not figure out how to center the data
You can use the custom field option. Referencing the state then splitting the UoM from that state was what I was specifically referencing.
For example this is 4 separate buttons inside a main button card.
You can do the same with the state.
3 Likes
Hello guys:
I am starting to create my dashboard and here you are my first problem.
I would like that the icon is BLUE when ON, and ORANGE when offā¦
this is my codeā¦ the color is showed good only when ON:
- type: custom:button-card
entity: light.colector_alex_hab_valeria
color_type: icon
color: rgb(70, 116, 156)
color_off: rgb(253, 192, 47)
Thank you
Hi, try this:
- type: custom:button-card
entity: light.colector_alex_hab_valeria
state:
- value: 'on'
color: 'rgb(70, 116, 156)'
- value: 'off'
color: 'rgb(253, 192, 47)'
Hello. that WORKEDā¦
thanks a lot for your fast help
1 Like
Hi, I have a custom button card with a entity picture ( the currently playing cover). It is possible to fade in the image every time that change? Now load without any transition.
Thanks in advance
Potentially stupid question here (I am NOT experienced with CSS). Iām trying to use the custom button card to change icon colours based on entity state. I have a theme installed (Caule). Only the theme colours show - is there a way to override the theme within the custom button card?
They say thereās no stupid question, only stupid answersā¦ 
Back to topic: i use this system for such cases:
styles:
icon:
- color: |
[[[
if (states['sensor.whatever'].state =='on')
return "red"
else
return "lime"
]]]
1 Like
Hi, thanks for this. And that does indeed override the theme colours. I can use this to do exactly what I wanted. Kudos to you, very grateful. Although being me I want to know why, but that is for another day.
Because button-card supports JavaScriptās - they are one of most powerful functions of button card. You can do pretty much anything with it, for example:
name: | #or label, or any custom field...
[[[
if(states['sensor.temperature.out'].state > '25')
return "it's hot outside"
else if (states['sensor.temperature.out'].state > '15')
return "it's ok outside"
else
return "it's cold outside"
]]]
you can also define state to show another thing and not real state of sensor, but in this case itās like this:
show_state: true
state_display: |
[[[
if(states['sensor.status.ups'].state =='online')
return "UPS works on power"
else
return "UPS runs on batteries"
]]]
etcā¦
check button-cardās github page, there are many examples there.
I think that 50-70% of my cards are made with this button card. Iām dead if this card stops workingā¦
1 Like
Thanks for these example, gives me food for thought. I have solved my original issue, which is really embarrassing. I was using an input_boolean as the entity to test as I didnāt want to keep messing with the state of my aircon. Of course the boolean can only have two states, but I was trying to set it to e.g. heat, cool, etc and this of course messed up the cards actions and defaulted to the theme colours. Once I relpaced it with a dropdown helper with multiple states it all worked as expected. Here is my working code:
type: custom:button-card
entity: input_select.dummy_a_c
name: Bedroom
show_state: true
state:
- value: heat
color: red
icon: mdi:fire
- value: cool
color: blue
icon: mdi:snowflake
- value: 'off'
color: grey
icon: mdi:fan-off
re-styling some of my buttons, I am confronted with a challengeā¦
Id love to use the helpers.localize function on a distance sensor entity, which in itself it rather simple. However, I need that to be Intāed also, because I dont want the 4 decimal precision in the button.
Currently I do this:
custom_fields:
afstand: >
[[[ var afstand = parseInt(states['sensor.thuis_' + variables.id + '_distance'].state);
if (afstand != 0) return afstand + ' km'; ]]]
because the afstand variable is the .state, I can not use that inside the helpers.localize().
[[[ return helpers.localize( states['sensor.thuis_' + variables.id + '_distance'] ); ]]]
is the correct syntax, but, as said, it shows all decimals
cant we do this somehow?
edit
yes we can:
custom_fields:
afstand: >
[[[ var afstand = 'sensor.thuis_' + variables.id + '_distance';
return helpers.localize(states[afstand],undefined,0); ]]]
As @basbrus pointed out to me, the helpers function also has an option to set the precision.
I had completely forgotten about that. what a great step forward that has been.
thanks
Hello guys:
I was trying to create this card but I am not able to do that 
As you can see in the following image ( what I want to create)
It is a card with:
- Temp value 1 - name of the room 1 - Humidity of the room 1
- Temp value 2 - name of the room 2 - Humidity of the room 2
- Temp value 3 - name of the room 3 - Humidity of the room 3
Could you help me with the code to do this please::
Thanks a lot.
1 Like
Hi, try this as a start:
type: custom:button-card
entity: sensor.temperature_humidity_sensor_b543_temperature
show_label: false
show_icon: true
name: Temperatura y humedad
custom_fields:
campo1: >
[[[ return
states['sensor.termometro_humedad_govee_oficina_temperature'].state +' Ā°c'
]]]
campo2: |
[[[ return 'HabitaciĆ³n 1' ]]]
campo3: >
[[[ return states['sensor.termometro_humedad_govee_salon_humidity'].state
+'%' ]]]
campo4: >
[[[ return
states['sensor.termometro_humedad_govee_oficina_temperature'].state +' Ā°c'
]]]
campo5: |
[[[ return 'HabitaciĆ³n 2' ]]]
campo6: >
[[[ return states['sensor.termometro_humedad_govee_salon_humidity'].state
+'%' ]]]
campo7: >
[[[ return
states['sensor.termometro_humedad_govee_oficina_temperature'].state +' Ā°c'
]]]
campo8: |
[[[ return 'HabitaciĆ³n 3' ]]]
campo9: >
[[[ return states['sensor.termometro_humedad_govee_salon_humidity'].state
+'%'
]]]
styles:
grid:
- grid-template-areas: >-
"n n i" "campo1 campo2 campo3" "campo4 campo5 campo6" "campo7 campo8
campo9"
- grid-template-columns: 1fr 1fr 1fr
- grid-template-rows: 1fr 1fr 1fr 1fr;
card:
- padding: 10px
icon:
- width: 20px
img_cell:
- width: 20px
- justify-self: end
- align-self: end
name:
- justify-self: start
- font-size: 16px
- line-height: 40px
- font-weight: 600
custom_fields:
campo1:
- font-size: 16px
campo2:
- font-size: 16px
- justify-self: center
campo3:
- font-size: 16px
campo4:
- font-size: 16px
campo5:
- font-size: 16px
- justify-self: center
campo6:
- font-size: 16px
campo7:
- font-size: 16px
campo8:
- font-size: 16px
- justify-self: center
campo9:
- font-size: 16px
Only needs to replace your sensors.
Saludos 
1 Like
THANK YOUUU I will try
Best regards
1 Like
Whats wrong with my code? Icon doesnt work.
type: custom:button-card
entity: sensor.pocasi_dnes_1
show_name: true
show_state: false
show_label: true
show_icon: true
triggers_update: sensor.pocasi_dnes_1
styles:
card:
- border-radius: 10%
- padding: 0px
- height: 200px
- font-size: 20px
- font-family: Century Gothic
- background: rgba(100, 200, 250, 30%)
grid:
- grid-template-areas: '"n" "i" "tmax" "tmin" "l"'
name:
- font-weight: normal
- font-size: 14px
- color: white
- padding-bottom: 5px
custom_fields:
tmax:
- font-size: 25px
tmin:
- font-size: 25px
name: |
[[[
return states["sensor.den_v_tydnu_1"].state
]]]
custom_fields:
tmax: |
[[[
return `<span style="color: var(--text-color-sensor);"> ${states['sensor.teplota_dnes_1_max'].state } Ā°C </span>`
]]]
tmin: |
[[[
return `<span style="color: var(--text-color-sensor);"> ${states['sensor.teplota_dnes_1_min'].state } Ā°C </span>`
]]]
label: |
[[[
return `<span style="color: var(--text-color-sensor);"> ${states['sensor.rain_dnes_1_predpoved'].state } mm </span>`
]]]
state:
- operator: '=='
value: clear-night
icon: mdi:weather-night
- operator: '=='
value: cloudy
icon: mdi:weather-cloudy
- operator: '=='
value: fog
icon: mdi:weather-fog
- operator: '=='
value: hail
icon: mdi:weather-hail
- operator: '=='
value: lightning
icon: mdi:weather-lightning
but when i swap position of naem and icon, it works ok.
type: custom:button-card
entity: sensor.pocasi_dnes_1
show_name: true
show_state: false
show_label: true
show_icon: true
triggers_update: sensor.pocasi_dnes_1
styles:
card:
- border-radius: 10%
- padding: 0px
- height: 200px
- font-size: 20px
- font-family: Century Gothic
- background: rgba(100, 200, 250, 30%)
grid:
- grid-template-areas: '"i" "n" "tmax" "tmin" "l"'
But I want to have icon under the daoy of the week textā¦