Thanks for sharing this !
However, i always get a complete fill circle drawn, no matter the brightness:
Copypasted your code, but modified the style a bit:
custom_fields:
info:
- top: 5px
- right: 5px
- width: 35px
- position: absolute
- letter-spacing: 0.03vw
Try with - height: 10px !important
Here’s a cool little something you can do with custom:button-card, picture-elements card, and the lovelace-gen custom_component. Thanks @thomasloven for lovelace-gen.
Javascript macros, and, the ability to place button-cards at x-y % locations on the screen. It made my floorplan setup manageable.
Here is an extract of the the fans-specific macro and usage.
# Fans x%, y%, widthpx, heightpx, border, background
{{ fan_button('switch.fan1', 21.6, 57.8, 41, 41, 'solid', 'silver') }}
{{ fan_button('switch.fan2', 47.4, 22.4, 60, 60, 'none', 'transparent') }}
{{ fan_button('switch.fan3', 37.8, 39.0, 33, 33, 'none', 'white') }}
and the code:
# lovelace_gen
id: floor_plan
title: Floor Plan
panel: true
cards:
- type: picture-elements
image: !file /local/images/FloorPlan.svg
elements:
{% macro fan_button(entity, x, y, width, height, border, background) -%}
- entity: {{entity}}
type: custom:button-card
style: { left: {{x}}%, top: {{y}}% }
show_name: false
show_label: false
show_entity_picture: true
styles:
card:
- width: {{ width }}px
- height: {{ height }}px
- background-color: {{ background }}
- border-style: {{ border }}
- border-width: 1.2px
- color: 'black'
state:
- value: 'on'
spin: true
entity_picture: /local/images/FanRed.png
- value: 'off'
entity_picture: /local/images/FanBlack.png
spin: false
{%- endmacro %}
I have the same issue as you, and I have not been able to solve it.
I tried !important,
I tried using card-mod
Nothing, seems to help. Something is happening to the scale the height of the card. And the longer you will make the top row (i.e. add more buttons), the higher the header will grown.
@RomRider Can you share “header_icon_end” or “header_icon_middle” template? Curious how you are doing the alignments? Thank you!!
@Zkaning BTW custom:vertical-stack-in-card as RomRider showed above looks promising since that appears to retain its height. But I’m still playing with it to get the right effect. I’ll share when I find a solution
Then it’s probably the padding of the card. Try with padding: 0px
Haha, padding: 0px WORKS!!!
THANK YOU RomRider
So my last remaining issue is how to position 2+ button cards within vertical-stack-in-card. Say i want a title at the left (thats easy) and icon on the far right (that i cant seem to solve). I can force the title button card width to push the icon button to the far right. But i’m hoping there is more of pragmatic way of doing it
I copied the code direct from the GH link and my circles correctly draw based on the brightness.
maybe try on a test button stack first? i see your style changes (same as what i use) are for 4 button horizontal stack vs the original code which is suited for 3 buttons
Yeah, this is on a test button. Even on a 3 wide stack it doesn’t render a circle in chrome, firefox and android. Mmmm
sent you a PM 
Thanks for the tip but did not help. Can it be a bug?
Try with what I’ve said here:
It’s not a bug, it’s just CSS. You just have to learn it and inspect the styles in chrome or Firefox to help you.
I’ve got an issue with background pictures since the latest version. The picture flashes up but then disappears. Is this something to do with the triggers?
This is the top of the view including all the stacking in case it’s relevant.
- type: custom:layout-card
cards:
- type: custom:stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: device_tracker.me_composite
show_states: false
show_name: false
show_icon: false
aspect_ratio: 1/1
styles:
card:
- background-image: >
[[[
if (entity.state == 'home')
return 'url("/local/pictures/me_home.png")';
else
return 'url("/local/pictures/me_away.png")';
]]]
- background-repeat: no-repeat
- background-size: 100%
- background-position: center
Hi all
I’ve jsut updated to 3.3.2 from 3.2.x and I noticed that if the entity does not exist I get an error like this:
ButtonCardJSTemplateError: TypeError: Cannot read property 'state' of undefined in 'if (entity.state < 15)
With previous version, the button card just didn’t show up and this was ok for me (I know maybe it’s not correct, but at least I didn’t get any error in the dashboard).
This entity is an RFLink entity and sometimes it does not show up.
Any suggestion?
Thanks
Test if the entity exists or not:
if (!entity) return;
You might need to play around with the keep object in custom:stack-in-card, especially the settings around keeping the background on stacked cards.
That’s it, thanks!
You don’t even need to use macros. You can do this with !includes using the lovelace_gen and passed properties.
Thank you @RomRider, I did not understand that the solution was for me.
It did the trick!! Now it looks like I want 
What would be the best approach to having a button that changes its state on different parts depending on the type of entity. Example:
Front Door Light
Front Door Sensor
I would want the button card background to change color if the light was on / off
I would want the icon for the Door to be closed when Door Sensor is closed and Open when Door Sensor is open.
Is that doable? If so any pointers?