@RomRider, make a break! 
We have to edit our buttons every day with new features.
2 Likes
Yup, I love the work you are doing, you made this card from unusable to better than ever in just a few weeks.
And I do love it, but your health comes first mate. That is the beauty of Home Assistant, that most people will have patience.
Any way to support you @RomRider ? Donations for example?
1 Like
@RomRider, First Render issue seems fixed in my cases. Thanks for diverting off into the config-template-card for a moment.
THANKS, truly appreciated.
1 Like
Donāt worry, it doesnāt take that much time 
but thanks!
The card is now in a better shape, development will probably slow down a bit. Feel free to open issues or new feature requests on github though 
I have some more ideas, but now I want to use the new card in my own setup first 
I do that for fun and to learn, i didnāt know much about frontend development 2 weeks ago 
Best way to support that: do great things with the card and share your setup with others 
3 Likes
This card is wonderful and Iām having great fun playing with it. Could someone offer some help with my stylingā¦I am trying to set the border-color (ignore the color choice, they are random and just for testing 
)
cards:
- type: custom:compact-custom-header # Compact header config
- type: vertical-stack
cards:
- type: custom:card-modder # BANNER PICTURE ELEMENT
...blah blah....
- type: horizontal-stack # FIRST ROW OF BUTTONS
cards:
- type: custom:button-card
entity: light.living_room
color_type: card
icon: mdi:lightbulb
name: Wall Lights
tap_action:
action: toggle
hold_action:
action: more-info
state:
- value: "on"
color: '#1782ed'
style:
- border-color: '#ed17cc'
- border-radius: 25px
- value: "off"
style:
- border-color: '#1782ed'
size: 50% # SIZE OF THE ICON INSIDE THE BUTTON
style:
- height: 30px # HEIGHT OF THE CARD/BUTTON
The - border-color: command isnāt doing anything, however the - border-radius: 25px command does work. Any suggestions?
Setting it like this:
- border: 2px solid #ed17cc
Creates a solid white border, but not the color
Ok so I rebooted hassio and now it works! Problem solved!
Thanks again for creating such a brilliant and versatile card!
I definitely will share my setup as I always do, just working on all new stuff and ideas and Iāll push my setup on github.
Just a question though. One of the previous versions fixed the color: auto setting for entities that didnāt support RGB, however I get this now when the brightness is low, it looks more blackish (not the way core does it) however it might be a setting I set wrong ofcourse.
- type: "custom:button-card"
entity: light.woonkamer_led_lampen
name: LEDs
icon: "mdi:led-strip"
color: auto
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: success
state:
- value: "on"
style:
- border-radius: 20px
- height: 85px
- padding: 20%
- font-size: 11px
- border-style: solid
- border-width: 1px
- border-color: '#e5e5e5'
- --paper-card-background-color: rgba(20, 20, 20, 0.4)
- white-space: nowrap
- value: "off"
style:
- border-radius: 20px
- height: 85px
- padding: 20%
- font-size: 11px
- box-shadow: 2px 2px rgba(0,0,0,0.3)
- white-space: nowrap
I also have a question, with that same setting I have words that are too long cut off (whereas the core entity-button doesnāt). I even lowered the font size to 11px (down from 13px) to make it fit, but for some it worked, for some it didnāt.
1 Like
Iāve been using the button card for awhile and now need to start using some more advanced features. In particular, Iām interested in the template feature, but havenāt been able to get it to work. Furthermore, I cannot get much of the state āoperatorā capability. Iāve gutted my lovelace ui file to whatās below (in case there were some conflicts). I have an entity switch.ac1_enabled and when the value is āonā the card shows in blue as expected. If I change the matching value in the configuration from āonā to āblahā, I would expect the card to show up in green given the ādefaultā value, but it doesnāt work. It shows in black. My thought is that whatever is stopping this from working, is also stopping the templating capability from working for me.
This morning I download (via wget) the latest version of button-card.js and put it into the www directory. I figured there must be something simply that Iām not doing right, but I cannot figure it out.
views:
- path: Test
icon: 'mdi:water'
cards:
- name: Test Card
color_type: card
type: 'custom:button-card'
state:
- value: 'on'
color: blue
- operator: default
color: green
entity: switch.ac1_enabled
show_state: true
title: Water
resources:
- type: module
url: /local/button-card.jsJust from a quick look I think that you probably need operator: default to be in single quotes just like your value: 'on' is.
So for example:
- operator: 'default'
color: green
Thanks for the response. In the many hours spent trying to get this to work I had tried it both ways with no luck.
I just tested your button on my setup real quick and it worked fine here with my TV switch. Showed blue when on and green when off. It also showed the green default color when i changed āonā value to āblahāā¦ Thatās what you want right? I am not sure why itās not working for you, but you could maybe just change it to this instead since switches only have two values afaik:
- name: Test Card
color_type: card
type: 'custom:button-card'
state:
- value: 'on'
color: blue
- value: 'off'
color: green
entity: switch.ac1_enabled
show_state: true
Here is a working example of one I did for Spotify too which might help.
- type: custom:button-card
entity: media_player.spotify
icon: mdi:spotify
name: MUSIC
color_type: icon
tap_action:
action: service
service: media_player.media_play_pause
service_data:
entity_id: media_player.spotify
hold_action:
action: more-info
state:
- value: 'playing'
color: "#1db954"
- value: 'paused'
color: var(--disabled-text-color)
style:
- animation: blink 2s ease infinite
When playing music itāll be green, and when paused the color changes to a gray-ish and it blinks.
Thanks for the assistance. The discussion reminded me that my version of HA was several months outdated as each time I had attempted an upgrade it had failed. I just managed to get the RPi upgraded to HA 0.92.1 and that allowed the test configuration to work the way its supposed to.
Thanks again!
Iāll check that I remember having used the same formula as core
EDIT: You were absolutely right, next PR is going to fix that!
padding with a single value adds an invisible border all around the button (top, bottom, left and right), that also shrinks the size of the element that contains the text. First, I donāt think that you still need it with the latest version, as you can resize the icon and the button completely.
However if you want to keep your padding then padding: 20% 0px will be the solution (20% is top and bottom, 0px is left and right)
It was probably a cache issue @flyboy. I tried your setup and default is behaving as expected.
Let me know if there is any more issue.
No quotes around the javascript code in yaml, key: > means that everything on the following indented lines is a string. I will add some code to remove quotes if someone adds them, that will help to avoid dealing with lots of github issues 
Also looking at your config @jimz011, it makes me think that maybe the style options should be additive between the main part of the config and each state to avoid code duplication. What do you people think?
@RomRider Right. If you style inside the state, it ignores styles outside of the state. So yes, styles inside the state should add to styles outside, and override if there is a conflict.
Also want to say, you have made this button one of the most important elements in Lovelace. Iām looking forward to seeing how people create innovative panels with this button.
Off-topic, (but Iād like to know from people using this button) does anyone use Layout Card or something else to establish card order?
Cheers, Richard
1 Like
@RomRider is there a way to have the buttons centered ?
If I donāt mentioned the width on the last button it gets very wide as you see on the green button.
I try to have uniform buttons.
@elRadix, add 1 color_type: blank-card on each side of your horizontal-stack, both without a width and it will be centered
can you show me how, not getting any results
See card config here:
cards:
- type: 'custom:button-card'
color: 'rgb(0,0,0.5)'
color_off: var(--disabled-text-color)
color_type: card
default_color: var(--primary-text-color)
name: LIVING
style:
- font-size: 20px
- font-weight: bold
- padding: 0px
- height: 45px
- border-color: '#ed17cc'
- border-radius: 25px
- cards:
- card_style: ''
color: 'rgb(255, 255, 0)'
color_off: 'var(--disabled-text-color)(189, 255, 5)'
color_type: card
default_color: var(--primary-text-color)
entity: switch.stp_living_other
icon: 'mdi:power-socket-eu'
name: Muur
show_name: false
size: 75%
hold_action:
action: more-info
haptic: success
state:
- value: 'on'
style:
- height: 70px
- width: 70px
- border-radius: 50px
- border-style: solid
- border-width: 2px
- border-color: '#e5e5e5'
- value: 'off'
style:
- height: 70px
- width: 70px
- border-radius: 50px
- font-size: 11px
- box-shadow: '2px 2px rgba(0,0,0,0.3)'
type: 'custom:button-card'
- card_style: ''
color: 'rgb(255, 255, 0)'
color_off: 'var(--disabled-text-color)(189, 255, 5)'
color_type: card
default_color: var(--primary-text-color)
entity: switch.living
icon: 'mdi:battery-charging-40'
name: Bureau Lader
show_name: false
size: 75%
hold_action:
action: more-info
haptic: success
state:
- value: 'on'
style:
- height: 70px
- width: 70px
- border-radius: 50px
- border-style: solid
- border-width: 2px
- border-color: '#e5e5e5'
- value: 'off'
style:
- height: 70px
- width: 70px
- border-radius: 50px
- font-size: 11px
- box-shadow: '2px 2px rgba(0,0,0,0.3)'
type: 'custom:button-card'
- card_style: ''
color: 'rgb(255, 255, 0)'
color_off: 'var(--disabled-text-color)(189, 255, 5)'
color_type: card
default_color: var(--primary-text-color)
entity: switch.stp_living_bureau
icon: 'mdi:speaker-wireless'
name: SUBWoofer
show_name: false
size: 75%
hold_action:
action: more-info
haptic: success
state:
- value: 'on'
style:
- height: 70px
- width: 70px
- border-radius: 50px
- border-style: solid
- border-width: 2px
- border-color: '#e5e5e5'
- value: 'off'
style:
- height: 70px
- width: 70px
- border-radius: 50px
- font-size: 11px
- box-shadow: '2px 2px rgba(0,0,0,0.3)'
type: 'custom:button-card'
type: horizontal-stack
type: vertical-stack
@RomRider - do you have on your āto-doā list the ability to individually customise text, icon, and card colour depending on either the card entity state or another specified entity by any chance please? I canāt see any reference to this in the GitHub readme or open issues, so happy to create a new one for tracking if you like?
Thanks.
Try this below
cards:
- type: 'custom:button-card'
color: 'rgb(0,0,0.5)'
color_off: var(--disabled-text-color)
color_type: card
default_color: var(--primary-text-color)
name: LIVING
style:
- font-size: 20px
- font-weight: bold
- padding: 0px
- height: 45px
- border-color: '#ed17cc'
- border-radius: 25px
- cards:
- type: "custom:button-card"
color_type: blank-card
- card_style: ''
color: 'rgb(255, 255, 0)'
color_off: 'var(--disabled-text-color)(189, 255, 5)'
color_type: card
default_color: var(--primary-text-color)
entity: switch.stp_living_other
icon: 'mdi:power-socket-eu'
name: Muur
show_name: false
size: 75%
hold_action:
action: more-info
haptic: success
state:
- value: 'on'
style:
- height: 70px
- width: 70px
- border-radius: 50px
- border-style: solid
- border-width: 2px
- border-color: '#e5e5e5'
- value: 'off'
style:
- height: 70px
- width: 70px
- border-radius: 50px
- font-size: 11px
- box-shadow: '2px 2px rgba(0,0,0,0.3)'
type: 'custom:button-card'
- card_style: ''
color: 'rgb(255, 255, 0)'
color_off: 'var(--disabled-text-color)(189, 255, 5)'
color_type: card
default_color: var(--primary-text-color)
entity: switch.living
icon: 'mdi:battery-charging-40'
name: Bureau Lader
show_name: false
size: 75%
hold_action:
action: more-info
haptic: success
state:
- value: 'on'
style:
- height: 70px
- width: 70px
- border-radius: 50px
- border-style: solid
- border-width: 2px
- border-color: '#e5e5e5'
- value: 'off'
style:
- height: 70px
- width: 70px
- border-radius: 50px
- font-size: 11px
- box-shadow: '2px 2px rgba(0,0,0,0.3)'
type: 'custom:button-card'
- card_style: ''
color: 'rgb(255, 255, 0)'
color_off: 'var(--disabled-text-color)(189, 255, 5)'
color_type: card
default_color: var(--primary-text-color)
entity: switch.stp_living_bureau
icon: 'mdi:speaker-wireless'
name: SUBWoofer
show_name: false
size: 75%
hold_action:
action: more-info
haptic: success
state:
- value: 'on'
style:
- height: 70px
- width: 70px
- border-radius: 50px
- border-style: solid
- border-width: 2px
- border-color: '#e5e5e5'
- value: 'off'
style:
- height: 70px
- width: 70px
- border-radius: 50px
- font-size: 11px
- box-shadow: '2px 2px rgba(0,0,0,0.3)'
type: 'custom:button-card'
- type: "custom:button-card"
color_type: blank-card
type: horizontal-stack
type: vertical-stack
Please do so yes
3 Likes
great tip, thank you very much !!!
2 Likes