Yes. I have a mute button for my media player card that turns red when when I press it. I’d also like it to turn red if I mute the audio from another source. Otherwise the button state can get out of sync with the actual mute state of my receiver.
I’ll check out operators and see if I can figure them out. Thank you!
Something like this should do the trick (Add it on top of the other states already defined and tweak it accordingly)
state:
- operator: template
value: >
return states['media_player.other_media_player'].attributes.is_volume_muted === true
color: red
That works perfectly! Thank you!
Question for everyone:
I have in mind to deprecate the confirmation option, based on this upcoming feature:
Basically you’d have to click once the button before being able to really interact with it (it’s completely inspired by @thomasloven’s toggle-lock-entity-row).
0 voters
A huge thank you for implementing styling per element - this button card really is amazing now!
Taking your “TEST LIGHT” example, I attempted to align the icon to the left of the text so that it wasn’t just stuck on top as seen below, (changing all justify-self to end) and using layout: icon_state_name2nd. It didn’t quite have the desired outcome though: 
Preferably though, would it be possible to have a new layout option so that the icon can be to the right of the text please? It would be nice to fit the icon in that handy space on the right, as seen using my mockup below:
Thanks!
I’ve also attempted to have the icon colour match the cool/warm white colour of the bulb by adding color: auto to the code below (with color_type: icon). I found it doesn’t work though, yet I can’t see any icon overrides in the code?
- type: "custom:button-card"
color_type: icon
color: auto
entity: light.study_desk_lamp
label_template: >
var bri = states['light.study_desk_lamp'].attributes.brightness;
return 'Brightness: ' + (bri ? bri : '0') + '%';
show_label: true
show_state: true
# layout: icon_state_name2nd
name: Study
hold_action:
action: more-info
size: 20%
styles:
card:
- height: 100px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- text-transform: uppercase
- letter-spacing: 0.5em
- font-familly: cursive
- justify-self: start
- padding: 0px 5px
state:
- justify-self: start
- font-size: 10px
- padding: 0px 5px
state:
- value: 'on'
styles:
state:
- color: green
- value: 'off'
styles:
state:
- color: red
card:
- filter: brightness(40%)
Please open a feature request on github, it’s easier for me to track it 
Is your light entity a rgb light or at least does it support brightness control? If not color auto will not do anything. Can you share the full state (with all the attributes) while it’s on please?
That didn’t work unfortunately. I tried the following:
- color_type: card
entity: light.outside_front_door
name: Front door
label_template: >
return Date.now() - (states['light.led_strip'].last_changed);
show_label: true
state:
- color: 'rgb(66, 134, 244)'
icon: 'mdi:lightbulb-outline'
value: 'off'
- color: 'rgb(189, 255, 5)'
icon: 'mdi:lightbulb-on'
value: 'on'
style:
- font-size: 12px
- font-weight: bold
type: 'custom:button-card'
Which dosen’t return anything (note I’m using a different light as it needs to be on I think). I tried just Date.now() which returns the milliseconds and then just the " ```
(states[‘light.led_strip’].last_changed);" which returns a actual date and time. So I think both dates need to be in the same format?
Will do, thanks!
Its a Philips Hue light bulb with just cool / warm white (no rgb) and the ability to dim the light. Here are the attributes when switched on:
min_mireds: 153
max_mireds: 500
brightness: 254
color_temp: 339
friendly_name: Study desk lamp
supported_features: 43
I’ll put this on Github as an issue as well. Thanks.
@RomRider
I finally got time to migrate to your new updated version instead of my homemade one and I love it!
I am glad that you implemented the navigate and blank-card/space-card that I needed.
But in my version that I did I could use space-card and the option div: to adjust the height on the space-card so the button was in the same height all the time.
In this one blank-card works the same but when I try to use style, card, height: 40px it will automatically put the background on the button and it will be visible again.
Anyway to work around that or maybe fix that so space-card always is blank even with style, height?
Fixed in the next release, thanks for reporting
in the meantime, you can do that:
styles:
card:
- height: YOURHEIGHT
- box-shadow: none
- background: none
The code doesn’t use the color_temp attribute that’s why you don’t see any difference and I don’t think that the default entity card in HA does either I’ll look into that but it’s not that easy as I don’t know what color_temp: 339 means 
I know it goes from orange-ish to blue-ish but appart from that?
Please open a feature request. I’ll think about something, it will probably display the label or the last_updated but not both at the same time.
Ah sweet! I tried to work around that with background but I didn’t think about none!
Keep up the good work man!
Isn’t there a way to keep both? I think this idea is great, but the confirmation button is even more “secure” in my opinion. I haven’t tried this yet, but I am guessing the confirmation button is a “pop-up”? If that is so than pop-up confirmation would potentially better protect you from unwanted/accidental presses.
FWIW, I’d like an even more secure button: e.g. click on the button, then enter a code into a popup. 
I’ll keep both in the end, but confirmation is kind of ugly as it’s a pure browser popup. I will think about replacing it maybe in the future with something else also with a popup, but a html designed one
Feature request 
Designing a popup feels like designing a whole new card
Is it me and my config or does the justify-self within icon not work?
For example, using the yaml below, I can move the label left and right ok:
styles:
icon:
- justify-self: start
label:
- justify-self: start
label - justify-self - start
label - justify-self - end
If I try the same with icon, it just stays in the same place:
icon - justify-self - start
icon - justify-self - end
Full card yaml below:
- type: "custom:button-card"
entity: input_boolean.window_is_open
color_type: card
show_name: false
show_label: true
layout: icon_label
size: 20px
styles:
icon:
- justify-self: end
label:
- justify-self: start
card:
- height: 50px
label_template: >
return 'Windows: ' + states['sensor.windows_open'].state;
state:
- value: "on"
color: rgb(71,39,45) #Red
icon: mdi:window-open
styles:
label:
- color: rgb(220,69,121)
icon:
- color: rgb(220,69,121)
- value: "off"
color: rgb(49,68,42) #Green
icon: mdi:window-closed
styles:
label:
- color: rgb(134,219,85)
icon:
- color: rgb(134,219,85)
Card when a window is open (just to demonstrate code above)
Happy to open a bug issue on GitHub for tracking if you think this is a bug.
FWIW, thomasloven developed a popup card. Maybe that could be leveraged for this purpose?
I don’t think it would help much, it is basically just a more-info replacement to show a different lovelace card (and it would definitely not look great on a mobile phone as the popup card fills the entire screen).
I think it could be done but it would be like a single button on a fullscreen page. A smaller popup like the standard ios one would probably be nicer imo. I use the popup card a lot, but admittedly it looks cooler on a tablet/pc than on an iphone.
First screenshot: iPhone X, Second screenshot: PC
Hi,
I am trying to achieve something like this:
Where the temperature is from a sensor and ‘Living Room’ is the name attribute of the button, but I cannot seem to get the layout of the temperature and the room name correct.
Any ideas please?
@RomRider It looks this this could do with a new layout option called state_name?
Or perhaps if using icon_state and show_icon: false, the line with state needs to be centred.
