If you look at what I posted above, I do use the icon style. This for me only changes the text. You mentioned icon div which I don’t see.
This changes the icon color for me. I’m using button-card templates to simplify the card definitions, cards for the same type of entity are using the same set of templates. Templates are additive.
Works for me for lights, door/window contacts, temperature, humidity, … what I do not have is switches.
For example (not claiming any credits 
most of it is “stolen” from this thread and rearranged for my needs )
- type: custom:button-card
entity: binary_sensor.fenster_arbeitszimmer
template:
- ah-card
- onoffstate
- kontakt
button_card_templates:
ah-card:
styles:
card:
- border-radius: 15px
- margin: 15px 15px 0px 0px
- padding: 0px 0px
icon:
- align-self: end
name:
- justify-self: center
- padding: 0px 10px
label:
- align-self: end
- padding: 7px
- font-size: 11px
- font-weight: bold
- font-family: Helvetica
state:
- font-size: 15px
- font-family: Helvetica
- text-transform: capitalize
- font-weight: bold
- align-self: end
- justify-self: center
- padding: 9px 10px
onoffstate:
state:
- value: 'off'
color: rgb(0, 255, 0)
styles:
card:
- '--off-color': green
- box-shadow: 0px 0px 10px 3px var(--off-color)
label:
- color: green
name:
- color: green
- value: 'on'
color: rgb(255, 0, 0)
styles:
card:
- '--on-color': red
- box-shadow: 0px 0px 10px 3px var(--on-color)
name:
- color: red
state:
- color: red
label:
- color: red
kontakt:
tap_action:
action: more-info
Looks like this:
Window closed
Window open (uhh. need to be quick to make a screenshot, it’s cold outside…)
I couldn’t find any reference to the actual color for an icon “on” state in Lovelace. The closest I could get, without messing with RGB parameters for hours, is goldenrod. It’s pretty close to the default. Just for completeness, the Lovelace default icon color is steelblue, or so I think.
tbh, setting icon color in the style object has been there since the beginning, its a bit more code than relying on HA colors, but way more customizable, and for that I’ve only ever used that, if needed to color the icons.
here’s an abridged template using the style: on various states. The color vars are my own, and set in my themes. If you don’t have those, simply replace with anything you do have, or any valid direct color Css
icon_color:
state:
- operator: template
value: >
[[[ var id = entity.entity_id.split('.')[1];
var connected = 'sensor.' + id + '_connectivity';
return states[connected] && states[connected].state === 'connectivity_issue'; ]]]
styles:
icon:
- color: var(--alert-color)
- value: 'on'
styles:
icon:
- color: var(--active-color)
- value: 'off'
styles:
icon:
- color: black
- value: unavailable
styles:
icon:
- color: '#D3D3D3'
inject in any button using template: icon_color
ofc, you also use these or bits of these on an individual button directly. The options are endless
if you want something inside the styles object, you can ofc use:
styles:
icon:
- color: >
[[[ return (entity.state > 0) ? 'red' : 'green'; ]]]
When i power my 3D printer then i run script which toggles 2 sockets ON or OFF.
I can use button card to toggle but i dont see which state it is. Is it possible when i toggle ON then card is green and when toggle OFF then it is red?
@ktownsend-personal thanks for all your work and others I’ve learned and adopted ideas. Can someone point me in the correct direction in creating 2 rows of buttons for the Kitchen Label? I’m using the container template but cannot combine a vertical and horizontal stack.
type: custom:button-card
template: container
color: '#005b96'
name: Kitchen
custom_fields:
buttons:
card:
type: horizontal-stack
cards:
- entity: switch.kitchen_4_pots
name: 4" Pots
template:
- base-card
- onoffstate
- contact
icon: mdi:light-recessed
type: custom:button-card
- entity: light.kitchen_pots
name: Kitchen
template:
- base-card
- onoffstate
- contact
icon: mdi:light-recessed
type: custom:button-card
- entity: switch.kitchen_cabinet_lights_2
name: Cabinet
template:
- base-card
- onoffstate
- contact
icon: mdi:led-strip-variant
type: custom:button-card
- entity: light.kitchen_island_pots
name: Island
Try a vertical stack containing two horizontal stacks.
I’m able to get the vertical stack working, also the horizontal stack but not both. This could be where I’m placing the stack…can you give me a suggestion on where to insert the Vert and Horizontal Stacks?
In your example, change the horizontal stack to vertical, then in ‘cards:’ put the two horizontal stacks. In each horizontal stack’s ‘cards:’ put your buttons.
1 Like
Ok, I’ve been searching my butt off but can’t seem to find the right solution.
I want to create a custom card as follow:
welcome:
tap_action:
action: "none"
show_icon: false
show_label: true
show_name: true
styles:
card:
- background-color: "none"
- box-shadow: "none"
- height: "auto"
- width: "auto"
- margin-top: "6px"
- margin-bottom: "0px"
- padding: "1em"
- border: "none"
grid:
- grid-template-areas: "'welcome' 'l'"
- grid-template-columns: "1fr"
- grid-template-rows: "min-content min-content"
name:
- justify-self: "start"
- font-weight: "bold"
- font-size: "2rem"
- font-family: "Merriweather"
- white-space: "normal"
label:
- justify-self: "start"
- font-size: "1rem"
- opacity: "0.4"
- font-family: "Arial"
custom_fields:
welcome:
- justify-self: "start"
- font-weight: "bold"
- font-size: "2rem"
- font-family: "Merriweather"
- white-space: "normal"
custom_fields:
welcome: |
[[[
if (now().hour < 12)
return `Good morning.`
else if (now().hour < 18)
return `Good afternoon.`
else if (now().hour < 23)
return `Good evening.`
else
return `Good night.`
]]]
But it is not showing up …
Replacing
|
with
|- or > or >-
doesn’t do anything.
if I replace
|
[[[
if (now().hour < 12)
return `Good morning.`
else if (now().hour < 18)
return `Good afternoon.`
else if (now().hour < 23)
return `Good evening.`
else
return `Good night.`
]]]
with a simple “test”, then it shows up.
Can anyone help me figure out how I can get this to work?
any guidance would be very helpful!
Hello, really loving this card, does some body knows if it is possible to change the color of the lock ( 
) symbol?
Try this:
custom_fields:
welcome: |
[[[
if (now().hour < 12) return 'Good morning.';
else if (now().hour < 18) return 'Good afternoon.';
else if (now().hour < 23) return 'Good evening.';
else return 'Good night.';
]]]
(Add a “;” at the end of the return statements, replace the `s with 's and put the statements all on one line.)
That construction works for me.
problem solved…
I’ve been struggling with custom button card.
I’ve created 4 buttons which change colors each time a state of a sensor is changed.
I can’t fix the color of the first button as required, even though I have copy / paste the code (From other button cards). To be honest as I am facing strange behavior am sure this is a bug, but I can’t reproduce it.
day mode
dark mode
When triggered all 4 buttons blinks red as expected (only 2 at the moment)
Ofcourse you will want to see the yaml code, here it is
type: custom:button-card
tap_action:
action: none
entity: input_boolean.dehumidifier_bucket
icon: mdi:air-humidifier
color_type: card
color: var(--paper-item-icon-color)
name: ΑΦΥΓΡΑΝ.
state:
- value: 'on'
color: rgb(255, 0, 0)
icon: mdi:alert-box
styles:
card:
- animation: blink 3s ease infinite
size: 55%
styles:
card:
- height: 115px
grid:
- position: relative
custom_fields:
notification:
- background-color: |
[[[
if (states['binary_sensor.dehumidifier_bucket_status'].state == 'on')
return "white";
return "yellow";
]]]
- border-radius: 50%
- position: absolute
- left: 70%
- top: 5%
- height: 25px
- width: 25px
- font-size: 18px
- line-height: 25px
- color: black
custom_fields:
notification: |
[[[ return (states['switch.baby_room'].state) ]]]
Let me tell you that I have play a lot with color option …
It doesn’t make any difference. I have even tried to set it under the state ‘off’ but in this case I can’t adapt theme’s colors (for day and dark mode)
any help would be really apreciated.
Sadly now I get an error stating: now is not defined…
how can i add HTML in the button-card ?
like this
<button-card style="flex: 0 0 auto; max-width: fit-content; --button-card-light-color:var(--primary-text-color); --button-card-light-color-no-temperature:var(--primary-text-color);">
<hr />
</button-card>
add a <hr /> in the wrap.
and how can i edit here the inline css?
<button-card style="flex: 0 0 auto; max-width: fit-content; --button-card-light-color:var(--primary-text-color); --button-card-light-color-no-temperature:var(--primary-text-color);"></button-card>
i need the button-card in full with:
flex: auto;
max-width: none;
thanks all
Apparently, now() doesn’t work in “limited templates.”
You can, however, create a time_date sensor check here for how to do that
and use the time value of that sensor in the comparisons.
Sorry about the confusion. I didn’t realize the limitation from my first sentence until I did some digging.
Hi Everyone
I wonder if anyone can assist.
I created a scrip to turn on a group of lights at desired temperature, brightness, colour etc. I used a custom button card to toggle this script on/off, the issue I have is I have no way of knowing when that script (lights) are on or off as the script is turned on for a few seconds only. There must be a work round, but been searching for days and not found anything.
Any advice?
Ah, too bad. I was hoping to do this without creating an extra sensor
Use the state of the group.
This is my card for the frontdoor
type: custom:button-card
entity: sensor.front_door_state
size: 50px
state:
- value: locked
color: green
name: Ytterdörr låst
- value: open
color: orange
name: Ytterdörr öppen
- value: closed
color: yellow
name: Ytterdörr stängd
- value: unknown
color: red
name: Ytterdörr okänd status
hold_action:
action: call-service
service: script.Frontdoor_lock_toggle
I would try something like this:
type: custom:button-card
entity: group.xxxx
state:
- value: on
color: yellow
name: group xxx light on
- value: off
color: blue
name: group xxx light off
hold_action:
action: call-service
service: script.xxxx
1 Like