Instead do something like this:
state:
- operator: template
value: "[[[ return entity.attributes.temperature == 18; ]]]"
color: rgb(255, 0, 0)
1 Like
Perfect, thank you @paddy0174 !
I have another small question: is it possible to make the font color conditional? I saw that there is color_type: card and color_type: label but I did not find a way to make the font change color.
I am asking because I am creating some buttons with text only and I do not want to color the card to highlight the current value.
You want to change the label font color ? Use the styles:
styles:
label:
- color: |
[[[
if (states['climate.eq_3_living_room'].attributes.temperature < 20)
return "#000000";
return "#131fbf";
]]]
But I thought one of the main features of the button-card is that the color is applied if the state condition is true and you then do not need to define a second condition.
After all, icon color and card color change without an if statement.
In Germany we have a saying, that translates to âall pathes go to Rome!â (coming from the ancient roman empire), meaning, whatever you choose, youâll end up in Rome. 
You can define the colors you want with the way you choose, it doesnât really matter which one. Both should work. For âyourâ way to work, you just need to set the same style definitions as you would with the second way.
state:
- operator: template
value: "[[[ return entity.state ]]]"
styles:
icon:
- color: 'rgba(var(--color-green),1)'
label:
- color: 'rgba(var(--color-green-text),1)'
This is just an example. 
Yes, itâs all âthe same in greenâ 
1 Like
Well, I figured since the color_type: is so elegant, it could also be applied to the label rather than having to work with variables/statements.
But I tried it and it is not quite working yet.
type: custom:button-card
entity: climate.eq_3_living_room
name: 'Off'
color_type: card
show_name: true
show_icon: false
show_state: false
state:
- operator: template
value: '[[[ return entity.attributes.temperature == 4.5; ]]]'
color: rgb(255, 0, 0)
styles:
label:
- color: |
[[[
if (entity.attributes.temperature == 4.5)
return "#ff0000";
return "#131fbf";
]]]
tap_action:
action: call-service
service: climate.set_temperature
service_data:
temperature: 4.5
entity_id: climate.eq_3_living_room
The card itself is not being colored in red but the new style is not being applied (I left the color_type in there for reference).
Quick additional question:
am I correct in understanding that it is possible to define background images for this button card? I saw the background changing example on github but strangely no example for a simple, permanent background, so not sure if this is possible with the animation css.
So Iâm using this template which works great (thanks @tom_l)
light_button:
aspect_ratio: 4/3
color_type: icon
hold_action:
action: more-info
haptic: selection
label: >
[[[ var bri = entity.attributes.brightness &&
Math.round(entity.attributes.brightness / 2.55); if
(entity.state === 'on') return (bri ? (bri+"%") : 'On'); else return "Off"; ]]]
layout: icon_label
show_label: true
show_name: true
state:
- styles:
card:
- border: solid 1px var(--button-card-light-color-no-temperature)
- box-shadow: 0px 0px 10px 3px var(--button-card-light-color-no-temperature)
label:
- color: var(--paper-item-icon-active-color)
value: 'on'
- styles:
card:
- border: solid 1px var(--primary-color)
- box-shadow: none
value: 'off'
- icon: mdi:alert
label: Lost
styles:
card:
- border: 'solid 1px #7f7f7f'
- box-shadow: none
icon:
- color: '#ff0000'
- opacity: 0.4
label:
- color: '#7f7f7f'
name:
- color: '#7f7f7f'
value: unavailable
styles:
card:
- border-radius: 10px
- padding: 6px 6px 6px 6px
- margin: 0% 0% 0% 0%
- '--ha-card-background': rgba(0, 0, 0, 0)
grid:
- grid-template-areas: '"i l l" "n n n"'
- grid-template-rows: 33% auto
- grid-template-columns: 33% auto
icon:
- width: 28px
- padding: 0px 0px 0px 0px
- color: var(--button-card-light-color-no-temperature)
label:
- font-size: 12px
- justify-self: right
- padding: 0px 0px 0px 0px
- color: var(--secondary-text-color)
name:
- justify-self: middle
- align-self: end
- font-size: 14px
- padding: 0px 0px 0px 0px
- color: var(--primary-text-color)
- white-space: normal
tap_action:
action: toggle
Which gives me this
Iâm trying to change the motion card to a RED border and flashing when active if possible ?
How or which part of the template code should I change to achieve this.
Because my coding sucks; an example would be appreciated in helping me understand, thanks 
Donât know about the flashing part but changing to red when on is easy enough, just these two last lines:
light_button:
aspect_ratio: 4/3
color_type: icon
hold_action:
action: more-info
haptic: selection
label: >
[[[ var bri = entity.attributes.brightness &&
Math.round(entity.attributes.brightness / 2.55); if
(entity.state === 'on') return (bri ? (bri+"%") : 'On'); else return "Off"; ]]]
layout: icon_label
show_label: true
show_name: true
state:
- styles:
card:
- border: solid 1px red
- box-shadow: 0px 0px 10px 3px red
2 Likes
Nice; you have a gift my friend. Thanks once again for taking the time to help
I have a problem and hope someone can help me. How do I get the buttons round at the bottom?
this is my codeâŚ
type: custom:button-card
entity: group.wohnzimmer_all
aspect_ratio: 1
name: Wohnzimmer
color_type: card
show_state: true
hold_action:
action: fire-dom-event
browser_mod:
command: popup
title: Wohnzimmer
large: false
hide_header: true
style:
$: |
.mdc-dialog {
backdrop-filter: blur(17px);
-webkit-backdrop-filter: blur(17px);
background: rgba(0,0,0,0.25);
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
background: none !important;
box-shadow: none;
border-radius: 0px;
}
.mdc-top-app-bar {
background: none !important;
}
card:
type: vertical-stack
cards:
- type: custom:simple-thermostat
entity: climate.wohnzimmer
- type: entities
card_mod:
class: content
entities:
- entity: sensor.wandthermostat_wohnzimmer_temperature
name: Raumtemperatur
- entity: sensor.wandthermostat_wohnzimmer_humidity
name: Luftfeuchtigkeit
- entity: binary_sensor.wandthermostat_wohnzimmer_battery
name: Batterie
- type: custom:mini-graph-card
entities:
- color: '#385581'
entity: sensor.wandthermostat_wohnzimmer_temperature
line_width: 6
hour24: true
group: true
align_icon: left
align_state: right
align_header: left
hours_to_show: 24
show:
fill: fade
icon: false
name: false
state: false
name_adaptive_color: false
labels: hover
legend: false
tap_action:
action: none
custom_fields:
Brightness:
card:
type: custom:button-card
state:
- value: 'on'
color: rgba(65,65,63,0.2)
- value: 'off'
color: rgba(65,65,63,0.2)
entity: group.wohnzimmer_all
show_name: false
show_state: false
show_entity_picture: false
color_type: icon
color: rgba(65,65,63,0.2)
tap_action:
action: fire-dom-event
browser_mod:
command: popup
hide_header: true
large: false
style:
$: |
.mdc-dialog {
backdrop-filter: blur(17px);
-webkit-backdrop-filter: blur(17px);
background: rgba(0,0,0,0.25);
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
background: none !important;
box-shadow: none;
border-radius: 0px;
}
.mdc-top-app-bar {
background: none !important;
}
card:
type: entities
entities:
- type: custom:light-popup-card
entity: light.wohnzimmer
icon: none
hideIcon: true
fullscreen: false
brightnessWidth: 130px
brightnessHeight: 360px
borderRadius: 1.7em
sliderColor: '#c7c7c7'
sliderTrackColor: rgba(25, 25, 25, 0.9)
- type: custom:hui-element
card_type: horizontal-stack
card_mod:
style: |
#root {
justify-content: center;
margin-top: 2em;
}
cards:
- type: custom:button-card
styles:
card:
- background: '#d8d9e1'
tap_action:
action: call-service
service: light.turn_on
service_data:
entity_id: light.wohnzimmer
color_temp: 153
- type: custom:button-card
styles:
card:
- background: '#d5b08d'
tap_action:
action: call-service
service: light.turn_on
service_data:
entity_id: light.wohnzimmer
color_temp: 326
- type: custom:hui-element
card_type: horizontal-stack
card_mod:
style: |
#root {
justify-content: center;
margin-bottom: 1em;
}
cards:
- type: custom:button-card
styles:
card:
- background: '#ce944b'
tap_action:
action: call-service
service: light.turn_on
service_data:
entity_id: light.wohnzimmer
color_temp: 500
- type: custom:button-card
styles:
card:
- background: >-
radial-gradient(circle, rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 0) 80%), conic-gradient(rgb(120, 39,
230), rgb(230, 34, 231), rgb(228, 5, 136), rgb(228, 25,
25), rgb(229, 105, 30), rgb(232, 226, 46), rgb(125, 230,
41), rgb(52, 232, 40), rgb(51, 231, 92), rgb(52, 232,
224), rgb(32, 125, 229), rgb(18, 39, 229), rgb(120, 39,
230))
tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: Wohnzimmer
hide_header: true
card:
type: custom:light-entity-card
entity: light.wohnzimmer
brightness: true
color_temp: true
full_width_sliders: false
hide_header: true
show_slider_percent: true
smooth_color_wheel: true
persist_features: true
consolidate_entities: true
styles:
card:
- width: 40px
icon:
- width: 70%
style: |
ha-card {
box-shadow: none;
background: transparent
}
icon: mdi:brightness-6
show_entity_picture: true
styles:
card:
- width: 100px
- height: 100px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
name:
- justify-self: start
- padding-left: 7px
- font-weight: bold
- font-family: Sans-serif
- font-size: 13px
img_cell:
- justify-content: start
- padding-left: 19px
- padding-top: 7px
- align-items: start
- margin: none
state:
- justify-self: start
- font-color: red
- font-size: 15px
- padding-left: 7px
- padding-bottom: 10px
- text-transform: capitalize
- font-family: Sans-serif
- font-size: 13px
icon:
- width: 30%
custom_fields:
Brightness:
- position: absolute
- left: 60%
- top: 10%
- width: 60%
state:
- value: 'on'
entity_picture: \local\img\icons8-armchair-96.png
color: rgba(243, 241, 239, 1)
- value: 'off'
entity_picture: \local\img\icons8-armchair-96.png
color: rgba(65,65,63,0.2)
styles:
card:
- filter: opacity(50%)
icon:
- filter: grayscale(100%)
Thanks in advance
I add width, height and border radius to the code. now it look like this⌠but how do I get the buttons in the middle of the card?
- type: custom:button-card
styles:
card:
- background: '#d8d9e1'
- border-radius: 50%
- width: 50px
- height: 50px
tap_action:
action: call-service
service: light.turn_on
service_data:
entity_id: light.wohnzimmer
color_temp: 153
Iâm not entirely sure either for the border but I make my buttons âwiggleâ when they turn on. You might like that instead 
state:
- value: 'on'
styles:
card:
- box-shadow: 0px 0px 2px 1px {{ color | default('var(--paper-item-icon-color)') }}
- animation: wiggle 0.16s 6
extra_styles: |
@keyframes wiggle {
0% { transform: rotate(0deg); }
33% { transform: rotate(10deg); }
66% { transform: rotate(-10deg); }
100% { transform: rotate(0deg); }
}
Actually, I just remembered that I do this for blinking but it blinks the whole button not the border. Maybe it is a clue?
state:
- value: 'unavailable'
styles:
icon:
- color: var(--accent-color)
- animation: blink 2s ease infinite
state:
- color: var(--accent-color)
- animation: blink 2s ease infinite
1 Like
I canât really find a practical solution for my âproblemâ: i have a dehumidifer card and i show different text. based on itâs power consumption.
All works, but i wonder, is it any better way to define âstate_displayâ ? Currently i have veeeery long definition and itâs quite a mess. Can it be broken into multiple lines to be more âuser friendlyâ for editing?
state_display: "[[[ if (states['sensor.tasmota_2_energy_power_1'].state ==0) return \"IZKLJUÄEN \_ \" + states['sensor.tasmota_2_energy_power_1'].state + \"W\"; else if (states['sensor.tasmota_2_energy_power_1'].state <10) return \"NAPAKA! \_ \" + states['sensor.tasmota_2_energy_power_1'].state + \"W\"; else if (states['sensor.tasmota_2_energy_power_1'].state <50) return \"VLAGA JE OK: \_ \" + states['sensor.tasmota_2_energy_power_1'].state + \"W\"; else return \"RAZVLAĹ˝UJE: \_ \" + states['sensor.tasmota_2_energy_power_1'].state + \"W\";]]]"
Youâre totally on the right track. Thanks for reminding me, I need this as well and had totally forgotten about @keyframes!
To make a border âblinkâ, you need to set the @keyframes, but change the border color from say yellow to black to yellow to black.
1 Like
Not sure if its been asked but i had a quick search and couldnt find anything. Are you able to inject or use a custom font for specific sections of a card e.g. I want a label to display with a LED Matrix font. My TTF is in my www folder so i would assume using Extra_Styles and then declaring the font source would work but it didnt for me:
@font-face {
font-family: TEST;
src: url(/local/fonts/TEST.ttf);
font-weight:400;
}
-font-family: TEST
To use Google fonts you can do thisâŚ
styles:
card:
- font-family: Oswald
In your 'resources.yaml`
- url: https://fonts.googleapis.com/css?family=Oswald
type: css
You can also use local fonts, there is a post somewhere on here that explains it (I beleive tom_l added the finishing touches. If I were a betting man Iâd wager he will be here soon⌠)
I have the following but wonât promise it is the entirety of the instructions⌠I canât actually remember 
In my 'resources.yaml`
- url: /local/fonts/loadfonts.js
type: module
In my www folder I have two files:
loadfonts.js
function loadcss() {
let css = '/local/fonts/fonts.css?v=0.013'
let link = document.createElement('link');
let head = document.getElementsByTagName('head')[0];
let tmp;
link.rel = 'stylesheet';
link.type = 'text/css';
tmp = link.cloneNode(true);
tmp.href = css;
head.appendChild(tmp);
console.info('%c Font Style sheet loaded', 'color: white; background: #000; font-weight: 700;');
}
loadcss();
and
fonts.css
@font-face {
font-family: "Oswald";
src: url(/local/fonts/oswald-variablefont_wght.woff2) format('woff2');
}
And then the font file I downloaded form google fonts in woff2 format
Actually I just remember I setup a custom font for a theme and used the resources. Those as woff and work. This is a ttf but doesnât appear to load.
Iâll do some more checking later. No need to download from Google for me. The font is all local.
@ [dexstar]
how do you use or save that template ?
I am trying to duplicate it to a button, but it needs something that i am missing ?
is it a grid card or what ? how can i use this ?
thanks in advance
gr. Wim