You are probably right, I just felt it might be a great addition to this card. I don’t mean to be disrespectful to @roflcoopter as his mod is great if that is what you were concerned about. I opened an issue on his github page as well, but honestly I feel the place where this mod belongs is on this card XD.
The deep press mod is quite useful outside this card, so I don’t think that argument really holds any weight.
You are right, I don’t know what I was thinking. It is late. My apologies for that. Still I think more eyes on @roflcoopter’s code might make it better as he said he is not a JS developer. Sorry if I have offended someone. I did not intend to in any way.
Even if you would embed it in the button-card it would still have the same problems, they wont fix themselves just by adding it to button-card
I will have a go at it, i believe it should be possible to fix both of @jimz011 issues.
Edit: The issue with deep-press activating buttons or other interactive items in a popup-card should be fixed with the latest release of deep-press
I understood that, but the reason I asked was because romrider had dealt with the double click before. Anyways thank you very much again and sorry if I sounded disrespectful for asking it here. It was late, I was tired. I respect all of the devs here!
Anyways thank you very much for fixing it!
I don’t think anyone took any offense 
I think we’re all on the same page now
1 Like
I’ve been playing around with a layout, but I can’t get the result I’m after.
I’m trying to make my button card look like this:
But I can only manage to make it look like this:
Any idea why the icon is so small?
My Code
- type: "custom:button-card"
entity: light.yeelight_color_ceiling_lamp_bedroom
name: Stue
label: Spisebord
show_last_changed: false
show_state: true
show_label: true
hold_action:
action: more-info
icon: mdi:ceiling-light
styles:
grid:
- grid-template-areas: '"n n" "i s" "l l"'
- grid-template-columns: 1fr auto
- grid-template-rows: 1fr 1fr
card:
- border-radius: 12px
- --ha-card-box-shadow: none
- height: 100px
- width: 133px
name:
- font-size: 14px
- margin: -20px 0 0 0
- padding: 0 0 0 10px
- font-family: Montserrat Medium
- justify-self: start
label:
- font-size: 14px
- padding: 0 0 0 10px
- font-family: Montserrat Medium
- padding: 0px 10px
- justify-self: start
state:
- font-size: 30px
- margin: -20px 20px 0 0
- font-family: Montserrat ExtraBold
- padding: 0px 10px
- justify-self: start
- text-transform: uppercase
state:
- value: 'off'
styles:
card:
- filter: opacity(50%)
icon:
- filter: grayscale(100%)
Try to add size: 100%
Got it working I think
Summary
- type: "custom:button-card"
entity: light.yeelight_color_ceiling_lamp_bedroom
name: Stue
label: Spisebord
show_last_changed: false
show_state: true
show_label: true
hold_action:
action: more-info
icon: mdi:ceiling-light
styles:
grid:
- grid-template-areas: '"n n" "i s" "l l"'
- grid-template-columns: 1fr auto
# - grid-template-rows: 1fr 1fr
- position: relative
card:
- border-radius: 12px
- --ha-card-box-shadow: none
- height: 100px
- width: 133px
img_cell:
- left: 10px
- bottom: 5px
icon:
- position: absolute
- width: 100%
- z-index: '999'
name:
- font-size: 14px
- padding: 0 0 0 10px
- font-family: Montserrat Medium
- justify-self: start
label:
- font-size: 14px
- padding: 0 0 0 10px
- font-family: Montserrat Medium
- padding: 0px 10px
- justify-self: start
state:
- font-size: 30px
# - margin: -20px 20px 0 0
- font-family: Montserrat ExtraBold
- padding: 0px 20px 8px 0
- width: 70px
- text-transform: uppercase
- text-align: right
state:
- value: 'off'
styles:
card:
- filter: opacity(50%)
icon:
- filter: grayscale(100%)
Code isn’t super clean, but I’ll post it anyway, if others need it
5 Likes
Firstly a huge thanks to @RomRider for all the continued work on this card, like others here my config wouldn’t be possible without this.
I’m wondering if there’s a way to do 2 things; 1. Require the hold action to unlock a card with lock enabled and 2. Use the locked/unlocked state to change styling of the icon or card?
Thanks
1 Like
I’m trying to add button_card_templates: !include button_card_templates.yaml to the raw editor in the front end but I get an error. What am I doing wrong?
That’s what I concluded 
so no way to include a config template in front end? Just have to add the actual template into raw editor?
Correct. If in storage mode it is just the single file
1 Like
Hey guys.
I am trying to get the icon color to change depending on 2 input_boolean.
I want the icon blue if both off them are on or else black…
What do i do wrong?
styles:
icon:
- color: >
[[[
if (states['input_boolean.alarm1'].state == on) && (states['input_boolean.alarm2'].state == on)
return "blue";
return "black";
]]]
Needs to be a string 'on'
I have tried with on and ‘on’ and also both the whole if inside () but I cant get it to work.
[[[
if ((states['input_boolean.alarm_1_mon'].state == 'on') && (states['input_boolean.alarm_1_enable'].state == 'on'))
return "blue";
return "black";
]]]
[[[
if (states['input_boolean.alarm_1_mon'].state == 'on') && (states['input_boolean.alarm_1_enable'].state == 'on')
return "blue";
return "black";
]]]
Or did I just misunderstood you @iantrich I am kinda of new of this 
try:
[[[
if (states['input_boolean.alarm_1_mon'].state == 'on' && states['input_boolean.alarm_1_enable'].state == 'on') return 'blue';
return 'black';
]]]
Hi Guys,
i want the fan icon to spin, this is my config in lovelace but it’s not icon not spinning, what i’m doing wrong?
lovelace:
- type: "vertical-stack" #col2
cards:
- type: "horizontal-stack"
cards:
- type: custom:button-card
entity: fan.ceiling_fan
icon_active: fa-spinner fa-spin
name: fan
icon: mdi:fan
show_state: true
state:
- spin: true