Except some readability for us Javascript novices. 
I’d say non-devs
@AhmadK
Per your suggestion, I moved my buried button-card out and created a single top-level horizontal-stack card with my 3 button-cards as members of that stack. Everything works as I would expect it to. The hass object is getting updated on state changes so I get the color changes and the proper services get called.
So, it appears that when a button-card is way down in the stack like I showed above, it is not getting it’s hass object updated when the state changes. It doesn’t appear to look like an independent card to the lovelace control code.
@RomRider As a side note, I had also noticed that if I put a javascript template in the buried button-card and dump console.dir(this.config), I actually get the config object for the top-level button-card. Using the custom_fields config variable in that object, I can dig down and get to the config for the buried card. That might be expected behavior, but I thought I would point it out.
The main reason I was using the button-card as my top-level card was to take advantage of some of it’s styling options for the container, but I can probably just apply some card-mod styles to a vertical-stack parent and get around that. Within the parent container, I don’t have any button-cards nested in other button-cards.
I’ll have a look, probably a problem with button-card 
That is expected this.config contains your whole button-card LL config.
Hi, its possible to make a invisible border?
A screenshot of what you want to remove would be useful in order to help you 
thanks for answer, finally i did it,just wanted to remove the border of the button
Wow, this is really a super versatile card! Thanks!
I managed to throw away the outdated circle-sensor-card and make my own with only a few lines of code.
custom_fields:
info: >
[[[ var brightness = Math.round( entity.attributes.brightness / 2.54 ); if (entity.state === 'on')
return '<svg viewBox="0 0 50 50"><circle id="c_brightness" cx="25" cy="25" r="20.5" stroke="#b2b2b2" stroke-width="1.5" fill="none" /><text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">' + brightness + '<tspan font-size="10">%</tspan></text></svg>'; ]]]
extra_styles: |
[[[ var radius = 20.5;
var circumference = radius * 2 * Math.PI;
var brightness = Math.round( entity.attributes.brightness / 2.54 );
return "#c_brightness { transform: rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray: " + circumference + "; stroke-dashoffset: " + (circumference - brightness / 100 * circumference) + ";}"; ]]]
And color only parts of a svg with fill="var(--button-card-light-color-no-temperature)"
custom_fields:
icon_hue: >
<svg viewBox="0 0 50 50"><path d="M27.4 47.3h-4.9s-.7.1-.7.8.4.9.7.9h4.9c.3 0 .7-.1.7-.9s-.7-.8-.7-.8zm3.3-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-3H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9s-.9-.8-.9-.8zm5.2-23.2c-3.3-5.3-7-5.6-10.9-5.6-3.8 0-8.4.4-10.9 5.6-.1.1-.1.3.1.7.4.8 3.3 7.2 3.2 18.8 0 1.1-.1 1.6 0 1.7 0 .1 0 .7 1.1.7h13c1 0 1-.5 1.1-.7v-1.7c-.1-11.6 2.8-18 3.2-18.8.1-.4.1-.5.1-.7" fill="#9da0a2"/><path d="M14.1 15.3c3.4-.3 7-.4 10.9-.4 3.8 0 7.5.2 10.9.4.4-.4.7-.8.9-1.1C39 8.5 38.9 6.5 38.9 6c-.2-4.4-8.4-5-12.1-5h0-3.4c-3.7 0-12 .5-12.1 5 0 .5-.1 2.5 2.1 8.2 0 .3.3.8.7 1.1z" fill="var(--button-card-light-color-no-temperature)"/></svg>
And finally svg animations that doesn’t only loop
custom_fields:
icon_fan: >
[[[ if (entity.state === 'on') return '<object type="image/svg+xml" data="/local/fan.svg"></object>';
else return '<svg viewBox="0 0 50 50" fill="#9ca2a5"><g class="spin animated"><circle cx="25" cy="25" r="6.6"/><path d="M31.9 30.4c-.5.6-1.1 1.1-1.7 1.5-1.4 1.1-3.2 1.7-5.2 1.7-2.3 0-4.5-.9-6-2.4-.9 1.1-1.6 2.3-2.3 3.2l-4.9 5.4c-1.8 2.7.3 5.6 2.5 7 3.9 2.4 9.8 3.1 14.1 1.9 4.6-1.3 7.9-4.7 7.4-9.7-.2-3.4-1.9-6-3.9-8.6zM17 28.3c-.4-1-.6-2.1-.6-3.3a8.7 8.7 0 0 1 6.4-8.4l-1.6-3.5L19 6.2c-1.5-2.8-5-2.5-7.3-1.2-4 2.2-7.5 6.9-8.7 11.3-1.2 4.6.2 9.2 4.7 11.3 3.1 1.3 6.1 1.2 9.3.7zm26.9-17.6c-3.3-3.4-8-4.6-12.1-1.8-2.8 1.8-4.2 4.6-5.5 7.5 4.2.6 7.4 4.2 7.4 8.6 0 .9-.1 1.7-.4 2.5 1.3.2 2.8.3 3.8.4 2.3.4 4.7 1.3 7.1 1.7 3.2.3 4.7-3 4.8-5.6.3-4.6-1.9-10.1-5.1-13.3z"/></g></svg>'; ]]]
extra_styles: |
@keyframes spin {
from { transform:rotate(0deg); }
to { transform:rotate(720deg); }
}
.spin.animated {
animation: spin 1.7s ease-out 1;
transform-origin: center center; }
https://github.com/matt8707/hass-config/blob/master/ui-lovelace.yaml
29 Likes
Do you happen to know how you could add how many lights are on in the corner like that how you have the brightness?
Fantastic addon! I just wanted to say thank you! With few extra ones I was able to build my status/control card for Air Purifier! 
One thing I was wondering if it’s possible is to add hover effect on the buttons.
1 Like
That is great!! Love it!
3 Likes
Hi i am having trouble with this can i can’t figure it out.
Can anyone help me please.
state:
- value: '[[[ return 'sensor.master_fan_speed' == 'low' ; ]]]'
spin: true
Thanks
Could you tell us more about your goal and maybe post a bit more of the card’s config.
Based on the docs, you need to use string values (not templates) with value unless operator is template, that’s why your current config doesn’t work.
Thanks @AhmadK i did this and it all works. 
state:
- operator: template
value: >
[[[ if (states['sensor.master_fan_speed'].state == 'low') return 'on' ; ]]]
spin: true
1 Like
You should be able to use the CSS modifier :hover in extra_styles to handle that.
Oh cool, will check it out!
Where do you put ‘extra_styles’? I don’t think that’s an option for button card right? Or am I missing something, can’t find that line in the documentation.
1 Like
It’s a main option at the root level. It’s in the doc’s in the main options table.
1 Like
Can’t believe I missed that, thanks!
1 Like