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
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.
Thx for reply @parautenbach .
I added like you say but I get error:
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.name.search('/refrigerators/i') != -1) {
var icon = 'mdi:fridge-variant-outline';
} else {
var icon = 'mdi:fridge-industrial-outline';
}
return icon;
]]]
Error:
ButtonCardJSTemplateError: TypeError: Cannot read property 'search' of undefined in 'var icon = 'mdi:brain'; if (entity.name.search('/refrigerators/i') != -1) { var icon = 'mdi:...'
I assumed that entity.name would exist. Could you check that it’s the case (maybe your entity is undefined or some other issue)? You can also try entity.friendly_name too (I think it might work too).
- entity: switch.haos_vir_kitchen_refrigerators
variables:
var_sensor_power: sensor.haos_vir_kitchen_refrigerators_power
name: Hladilniki
template:
- icon_info_bg
- outlet
type: 'custom:button-card'
- entity: switch.haos_vir_basement_refrigerator
variables:
var_sensor_power: sensor.haos_vir_basement_refrigerator_energy_power
name: Zamrzovalnik
template:
- icon_info_bg
- outlet
type: 'custom:button-card'
I’m using --button-card-light-color as icon color and drop-shadow color and would love an opaque background (let’s say 0.3) based on --button-card-light-color .
Sorry, I got my syntax a bit wrong. I’ve updated my post to at least work in some way.
Now that you’ve shared your sensors I don’t think my solution will work for you, since you want to match on e.g. sensor.haos_vir_kitchen_refrigerators_power which I don’t think is possible (this is the entity, not the name).
From the button card’s perspective, name refers to the name set in the card’s config, or will default to the friendly name.
thx for putting me to right direction 
I dont know why entity.name not working, but I have W sensor in variables variables.var_sensor_power and I read name from there.
Here is working example:
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 str = variables.var_sensor_power;
var icon = 'mdi:brain';
if (str.search("refrigerators") != -1) {
var icon = 'mdi:fridge-variant-outline';
} else if(str.search("refrigerator") != -1){
var icon = 'mdi:fridge-variant-outline';
} else if(str.search("climate") != -1){
var icon = 'mdi:hvac';
} else if(str.search("heater") != -1){
var icon = 'mdi:water-boiler';
} else if(str.search("dryer") != -1){
var icon = 'mdi:tumble-dryer';
} else if(str.search("washing") != -1){
var icon = 'mdi:washing-machine';
} else if(str.search("bed_socket") != -1){
var icon = 'mdi:bed-king-outline';
} else if(str.search("office") != -1){
var icon = 'mdi:desk';
} else if(str.search("media") != -1){
var icon = 'mdi:devices';
}
return icon;
]]]
Hello i just implemented the amazing custom button @tismondo originally posted in May 2020 (thank you @tismondo !!). the last piece im trying to figure out is getting the popup to work when you click on the card. I followed all instructions and made sure i installed the Browser Mod. Below is the code im using for the card it self. Any assistance anyone can provide is greatly apricated!
template: room
type: custom:decluttering-card
variables:
Hi,
There’s nothing in your code relating to browser-mod, so that makes it impossible to tell you what might be the cause of your issues. Please post the full decluttering template and the code for the card.
Also, please use proper formatting for your code so it can be copied over for testing.
Do you mean background of the card or background of the img_cell?