Thank you! That’s exactly what I needed.
Thank you! I also tried the text-shadow option and it’s really usefull
1 Like
Don’t hate me 
Is there a way to:
- Use HTML/RGBA colors instead of color name;
- Do the same thing with the icon.
Thank you again!
Mmh… at least you could try with text-shadow:
type: custom:button-card
icon: mdi:cat
size: 10rem
name: Test
styles:
name:
- '-webkit-text-stroke': 1px rgba(0, 0, 0, 0.9)
- '-webkit-text-fill-color': transparent
- font-size: 40px
- font-weight: 700
icon:
- filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.4)
- color: rgba(255, 255, 255, 1)
3 Likes
Thanks m8!
A new button-card which show a popup with map card and link which open maps (or waze) app on phone :
Code in this post :
Hello,
is there any way to change grid's grid-template-areas based on state ?
I tried something like this, but it doesn’t work 
my-template:
[... "options" and "scenes" are defined here]
styles:
grid:
- grid-template-areas: |
"i ."
"n ."
"options scenes"
- grid-template-columns: 80% 20%
- grid-template-rows: 1fr min-content min-content
state:
- styles:
grid:
- grid-template-areas: |
"i scenes"
"n ."
value: 'off'
Thanks !
Thomas
I’m using templating on grid-template-rows and it’s working fine.
The following should do the job:
styles:
…
…
grid:
- grid-template-areas: |
[[[ if (entity.state == 'on') return '"item1" "item2"'; return '"item1" "item2" "item3"' ]]]
P.S.: Don’t forget to adjust your grid-template-rows in this case.
1 Like
Is it possible to set opacity to var(--button-card-light-color) ?
What is the source of the variable?
It contains the color of the actual light. So the source isn’t fixed, but is the color attribute of the entity itself. GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant
You can always add a filter as a style option (like color) to change opacity.
filter: opacity(50%)
Can someone help me with this template:
water_heater:
icon: 'mdi:waves'
tap_action:
action: more-info
hold_action:
action: more-info
label: >-
[[[
var etat = "Ni na voljo";
if (entity.state == 'off'){
var etat = variables.var_sensor_temp.state + '°' + " • Izklopljeno";
} else if( variables.var_sensor_kwh.state > 0){
var etat = "Ogrevanje • " + variables.var_sensor_kwh.state + "kWh";
}
return etat ;
]]]
And here I defined variables:
- entity: switch.haos_vir_bathroom_water_heater
variables:
var_sensor_temp: sensor.haos_vir_bathroom_water_heater_water_temperature
var_sensor_kwh: sensor.haos_vir_bathroom_water_heater_energy_daily
name: Voda
template:
- icon_info_bg
- water_heater
type: 'custom:button-card'
I see undefined instead of temperature:
Your var_sensor_temp (and similarly var_sensor_kwh) are probably being defined as strings, so they wouldn’t have a .state property. Try replacing variables.var_sensor_temp.state with states[variables.var_sensor_temp].state
1 Like
Thank you for your answer. I’m looking for a way to make an icon/img cell background color opaque and in this case - unfortunately! - opacity won’t work. 
This should work if I understand correctly (under icon or img_cell style properties), where 0.5 is the opacity.
background: rgba(var(--button-card-light-color), 0.5)
Thank you so much for your research. But this only seems to take effect with a defined color. That’s the reason why I asked for the source of the variable.
Hello! Can I ask you about help? I have next templates:
button_card_templates:
button_template:
show_state: false
aspect_ratio: 1.8/1
size: 60%
state:
- value: 'on'
styles:
state:
- color: green
name:
- color: var(--primary-text-color)
icon:
- color: var(--paper-item-icon-active-color)
- value: 'off'
styles:
state:
- color: var(--paper-item-icon-color)
name:
- color: var(--primary-text-color)
icon:
- color: var(--paper-item-icon-color)
button_animated_template:
template: button_template
state:
- value: 'on'
styles:
icon:
- animation: rotating 1s linear infinite
If I add button with button_animated_template, animation doesn’t work:
- type: custom:button-card
entity: switch.bath_fan
name: "FAN"
icon: "mdi:fan"
template: button_animated_template
I also tried another variant:
- type: custom:button-card
entity: switch.bath_fan
name: "FAN"
icon: "mdi:fan"
template: button_template
state:
- value: 'on'
styles:
icon:
- animation: rotating 1s linear infinite
But animation doesn’t work too. And only if I make template as:
button_card_templates:
button_animated_template:
show_state: false
aspect_ratio: 1.8/1
size: 60%
state:
- value: 'on'
styles:
state:
- color: green
name:
- color: var(--primary-text-color)
icon:
- color: var(--paper-item-icon-active-color)
- animation: rotating 1s linear infinite
- value: 'off'
styles:
state:
- color: var(--paper-item-icon-color)
name:
- color: var(--primary-text-color)
icon:
- color: var(--paper-item-icon-color)
and make button as:
- type: custom:button-card
entity: switch.bath_fan
name: "FAN"
icon: "mdi:fan"
template: button_animated_template
In this case animation works. Is it a bug or am I doing something something wrong? Do I need to create two different templates for animated and non-animated buttons?
Not sure it works then. The source of the variable is the light entity itself, so it’s always different depending on the entity used on. This is the line in the button-card that sets this variable I believe:
this.style.setProperty("--button-card-light-color",this._getColorForLightEntity(this._stateObj,!0))
But you want this to not be transparant? I use this variable myself in light entities. but it’s not transparent for me. What do you use now for styling of the button-card?
How I can check if entity name contains refrigerator or refrigerators in entity name?
I try like this, but not working:
outlet:
tap_action:
action: more-info
label: |-
[[[ if (entity.state =='on')
var etat = "Vklopljen • " + states[variables.var_sensor_power].state + "W";
else
var etat = "Izklopljen";
return etat ; ]]]
icon: |
[[[
var icon = 'mdi:brain';
if ('entity' == '*refrigerator*'){
var icon = 'mdi:fridge-industrial-outline';
} else if('entity' == '*refrigerators*'){
var icon = 'mdi:fridge-variant-outline';
}
return icon;
]]]
template:
- yellow
I try with entity.name, still not working.
icon: |
[[[
var icon = 'mdi:brain';
if (entity.name == '*refrigerator*'){
var icon = 'mdi:fridge-industrial-outline';
} else if(entity.name == '*refrigerators*'){
var icon = 'mdi:fridge-variant-outline';
}
return icon;
]]]
These are templates using JavaScript. You’re going in the right direction with entity.name. The missing piece is to use search or indexOf. In your case, you need search if you want to ignore case, but you also need to switch your two conditions around, because (to use your syntax) '*refrigerator*' will also match '*refrigerators*'. In fact, if these are the only two options, you can simplify it even further (it’s a best practice to always have an else).
Try:
icon: |
[[[
var icon = 'mdi:brain';
if (entity.attributes.friendly_name.search('/refrigerators/i') != -1) {
var icon = 'mdi:fridge-variant-outline';
} else {
var icon = 'mdi:fridge-industrial-outline';
}
return icon;
]]]
So, search will find the string and return the index of the start of the match, using a regular expression, and ignoring case.