Try changing the padding of the card : padding: 0px 0px it should center itself automatically
Could you post your input_boolean: declaration as it pertains to this specific config? I’m curious to see how each input_boolean is configured.
Also, the spacing issue RomRider identified does need to be fixed. Looks like it’s off by a single indentation. It’s likely your other cards have this indentation problem as well.
Absolutely! Thanks for looking at it guys!
livingroom:
name: Living
initial: on
diningroom:
name: Dining
initial: off
kitchen:
name: Kitchen
initial: offThat looks ok as well. Hmmm…
I encountered a similar issue when I first began creating these tabbed views. In my case, one of my automations had an improperly configured Group Entity ID which ended up causing the tabbed views not to appear. To fix this, I leveraged the Unused Entities menu from the HA UI to make sure I had the correct spelling. To my naked eye, your config looks right but FWIW, RomRider caught a spacing issue that I missed so…
A bit late, but I missed your comment, but no it is a per person map, I just moved it so that my current location wouldn’t be visible on the forums 
but it is a person only map. I could add more zones and stuff, but I wanted to use it only to show where a set person is.
For what it’s worth, you guys could make this easier on yourself if you use switch templates and an input_select. No automations.
input_select:
room_display:
name: What room to display
options:
- living
- dining
- kitchen
initial: kitchen
Then for switches.
switch:
- platform: template
switches:
living:
value_template: "{{ is_state('input_select.room_display', 'living') }}"
turn_on:
service: input_select.select_option
data:
entity_id: input_select.room_display
option: living
turn_off:
service: input_select.select_option
data:
entity_id: input_select.room_display
option: living
dining:
value_template: "{{ is_state('input_select.room_display', 'dining') }}"
turn_on:
service: input_select.select_option
data:
entity_id: input_select.room_display
option: dining
turn_off:
service: input_select.select_option
data:
entity_id: input_select.room_display
option: dining
living:
value_template: "{{ is_state('input_select.room_display', 'kitchen') }}"
turn_on:
service: input_select.select_option
data:
entity_id: input_select.room_display
option: kitchen
turn_off:
service: input_select.select_option
data:
entity_id: input_select.room_display
option: kitchen
Now you have what is equivalent to 3 radio buttons. Only one of the switches will be on at a time.
2 Likes
Similar to how the padlock icon appears in the corner of the button if locking is enabled, is it possible to use the advanced grid options to have a number appear in either the top left or top right of this button, without affecting the centred position of the icon?
I noticed in the referenced style code that it seems to be listed as an overlay. Could overlay perhaps be a new option, with style letting you choose icons, colour, position, text, padding, etc?
Basically I have 10 kitchen spots that I wish to represent as 10 small buttons. It would be nice to have a number in each one as well, but tbh if this isn’t straightforward I can happily manage without.
It’s not straightforward, but I think you can achieve that by playing with CSS and moving eg the name out of the grid area. Going to test something tomorrow and let you know if I managed to do that. With CSS possibilities are virtually infinite. You can even get rid of the grid altogether and/or use fixed positioning for some elements 
1 Like
try this, you have to constrain the width of the card but it should work.
type: "custom:button-card"
layout: icon_name
color: auto
show_state: false
show_name: true
show_label: false
styles:
grid:
- grid-template-rows: 50px 0px 0px
- grid-template-columns: 50px 0px
card:
- padding: 0px
- border-radius: 15px
- height: 50px
- width: 50px
name:
- align-self: start
- padding: 10px -20px
Sorry @petro I’m not sure what you’re trying to show me? I see that your yaml example gives me an icon in the button, but I’m hoping to have a number appear in the top left or right corner of the button, a bit like the padlock icon.
Hmm, I updated to the latest version of this custom card. But now color_off doesn’t seems to work anymore. The background of the card is white while it should be some kind of grey according to my theme. It worked like it should before.
Anyone any idea?
—edit—
Even if I override the default color_off, the card’s background stays white:
- type: custom:button-card
color_type: card
entity: switch.eettafel_lamp
action: toggle
name: Eettafel
icon: mdi:ceiling-light
color: var(--primary-color)
color_off: rgb(168, 173, 175)color_off is not an option anymore it has been deprecated, please read the new documentation on github, especially:
https://github.com/custom-cards/button-card/blob/master/README.md#configuration-with-states
1 Like
Kuuji no longer maintains this card, the docs in the first post are indeed outdated, but I would always suggest getting the docs from the github repo instead of the forums.
I believe @romrider is the only dev working on this now!
1 Like
yes, thanks. that seems to work better. Though the icon and text still aren’t aligned centric, but at the top I think. Will have to find a way to centre them centric…
not sure if this is a feature request, but can we have icon_name_state_label…
reason I ask might be edge, but still, useful for others too. Having a longer shallow button has plenty of horizontal space, and not much vertical.
as you can see the label is placed really at the bottom edge (might need some extra padding after all, but dont want to de-place the center icon_name_state anymore.
an extra option for icon_name_state_label would be perfect… or icon_label_state:
maybe a bug: using icon_name_state, both name and state are colored, font_weighted and sized according to the name color and size, no matter what is set at the state config:
styles:
card:
- border-radius: 10px
- width: 330px
- height: 50px
- --paper-card-background-color: rgb(255, 251, 239)
label:
- color: gray
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
state:
- font-size: 11px
- font-family: Helvetica
- text-transform: capitalize
grid:
- grid-template-columns: min-content min-content
- width: min-content
- margin: auto
- grid-gap: 0px 10px
name:
- font-weight: bold
- font-family: Helvetica
- font-size: 13px
state:
- value: 'on'
styles:
name:
- color: red
state:
- color: grey
- value: 'off'
style:
- opacity: 0.4
styles:
icon:
- color: blue
name:
- color: gray
state:
- color: yellow
thanks!
I really, really, really hate this forum software. Can’t find anything. Why the F are they using this crap??
But my real question was: can I remove/adjust the padding between buttons/cards?
Haha, it is actually better than most forum software I have used imo. But they will always stay a pain, too much features
Yes, place the number in the name spot and see if it works.
space between cards is set by the margin css style. I believe there is still a gap that you cannot remove though.
1 Like
Thanks For this Button Card its alsum
here what i have done
my only problem is I get the RED Blocks “Custom element doesn’t exist: button card” on my phone
wouldnt know where to start looking 
its done my
adding anchors:
anchors:
custom_button_motion: &custom_button_motion
type: 'custom:button-card'
color_type: card
show_name: true
show_icon: true
show_last_changed: true
size: 20px
styles:
label:
- font-size: 10px
card:
- border-radius: 10px
state:
- value: 'on'
color: 'rgb(71,39,45)'
icon: 'mdi:run-fast'
styles:
label:
- color: 'rgb(220,69,121)'
icon:
- color: 'rgb(220,69,121)'
- value: 'off'
color: 'rgb(49,68,42)'
icon: 'mdi:run'
styles:
label:
- color: 'rgb(134,219,85)'
icon:
- color: 'rgb(134,219,85)'
custom_button_car: &custom_button_car
type: 'custom:button-card'
color_type: card
show_name: true
show_icon: true
show_last_changed: true
size: 20px
styles:
label:
- font-size: 10px
card:
- border-radius: 10px
state:
- value: 'on'
color: 'rgb(71,39,45)'
icon: 'mdi:car-connected'
styles:
label:
- color: 'rgb(220,69,121)'
icon:
- color: 'rgb(220,69,121)'
- value: 'off'
color: 'rgb(49,68,42)'
icon: 'mdi:car'
styles:
label:
- color: 'rgb(134,219,85)'
icon:
- color: 'rgb(134,219,85)'
custom_button_door: &custom_button_door
type: 'custom:button-card'
color_type: card
show_name: true
show_icon: true
show_last_changed: true
size: 20px
styles:
label:
- font-size: 10px
card:
- border-radius: 10px
state:
- value: 'on'
color: 'rgb(71,39,45)'
icon: 'mdi:door-open'
styles:
label:
- color: 'rgb(220,69,121)'
icon:
- color: 'rgb(220,69,121)'
- value: 'off'
color: 'rgb(49,68,42)'
icon: 'mdi:door-closed'
styles:
label:
- color: 'rgb(134,219,85)'
icon:
- color: 'rgb(134,219,85)'
custom_button_switch_active_glow: &custom_button_switch_active_glow
type: "custom:button-card"
layout: icon_label
show_state: true
show_name: true
show_label: false
styles:
grid:
- grid-template-rows: 30px auto 30px
card:
- border-radius: 15px
- height: 95px
- width: 95px
- margin: 0px 5px 0px 0px
icon:
- align-self: end
- height: 30px
- width: 30px
name:
- justify-self: start
- padding: 0px 10px
- font-size: 13px
label:
- align-self: end
- padding: 1px
- font-size: 11px
- font-weight: bold
- font-family: Helvetica
- text-transform: capitalize
state:
- font-size: 11px
- font-family: Helvetica
- text-transform: capitalize
- font-weight: bold
- align-self: end
- justify-self: start
- padding: 5px 10px
state:
- value: "on"
styles:
card:
- --paper-card-background-color: rgba(40, 40, 40)
- box-shadow: 0px 0px 20px 3px var(--paper-item-icon-active-color)
icon:
- color: var(--paper-item-icon-active-color)
name:
- color: white
state:
- color: white
label:
- color: white
tap_action:
action: toggle
hold_action:
action: more-info
custom_button_light_active_glow: &custom_button_light_active_glow
type: "custom:button-card"
layout: icon_label
show_state: true
show_name: true
show_label: true
styles:
grid:
- grid-template-rows: 30px auto 30px
card:
- border-radius: 15px
- height: 105px
- width: 105px
- margin: 0px 5px 0px 0px
icon:
- align-self: end
- height: 30px
- width: 30px
name:
- justify-self: start
- padding: 0px 10px
- font-size: 13px
label:
- align-self: end
- padding: 1px
- font-size: 11px
- font-weight: bold
- font-family: Helvetica
state:
- font-size: 11px
- font-family: Helvetica
- text-transform: capitalize
- font-weight: bold
- align-self: end
- justify-self: start
- padding: 5px 10px
state:
- value: "on"
styles:
card:
- --paper-card-background-color: rgba(40, 40, 40)
- box-shadow: 0px 0px 20px 3px var(--paper-item-icon-active-color)
icon:
- color: var(--paper-item-icon-active-color)
name:
- color: white
state:
- color: white
label:
- color: white
- value: "off"
styles:
label:
- color: rgba(0, 0, 0, 0.0)
tap_action:
action: toggle
hold_action:
action: more-info
then the card
cards:
- cards:
- <<: *custom_button_switch_active_glow
name: Hall
entity: light.hallway
- <<: *custom_button_switch_active_glow
name: Office
entity: light.office
- <<: *custom_button_switch_active_glow
name: Cupboard
entity: switch.cupboard_heater
- <<: *custom_button_switch_active_glow
entity: light.garage
type: horizontal-stack
- cards:
- <<: *custom_button_switch_active_glow
entity: light.workshop
- <<: *custom_button_switch_active_glow
name: Kitchen
entity: light.kitchen
- <<: *custom_button_switch_active_glow
name: Dinning
entity: light.dinning
- <<: *custom_button_switch_active_glow
entity: light.workshop_lamp
name: W-Lamp
type: horizontal-stack
so much easier
2 Likes