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
Anything is better than this. Anything. 
This works for me. <br /> is a new line in HTML, not \r\n:
- type: "custom:button-card"
layout: icon_label
color: auto
show_state: false
show_name: true
show_label: true
name: Media
icon: mdi:music-note
label: Line 1<br />Line 2
styles:
grid:
- grid-template-rows: 50px auto auto
- grid-template-columns: 50px auto
card:
- border-radius: 15px
- height: 76px
- width: 342px
- margin: 5px 5px 0px 0px
- --paper-card-background-color: rgba(40, 40, 40)
- box-shadow: 0px 0px 10px 3px var(--paper-item-icon-active-color
icon:
- color: var(--paper-item-icon-active-color)
- height: 30px
- width: 30px
name:
- justify-self: start
- padding: 0px 10px
- font-size: 12px
- text-transform: capitalize
label:
- text-transform: capitalize
- font-size: 12px
- justify-self: start
tap_action:
action: toggle
You are missing one min-content in grid-template-rows: 1fr min-content min-content as itâs 4 lines, not 3.
Thatâs expected unfortunately as name and state are one string in the name grid area. Couldnât do better than concatenate at the time this feature was written 
You canât overlap elements in a grid, in your screenshot, the label has to overlap the previous line (it needs to know what is the size of the elements). CSS is not paint, itâs not that easy 
However you can something like in my next response
Enjoy:
- type: custom:button-card
entity: switch.skylight
icon: mdi:spotlight
show_name: false
show_label: true
label: 4
layout: custom # this is important, it needs to be anything but a valid value :)
styles:
grid:
- display: flex
- position: relative
label:
- position: absolute
- left: 0
- right: 0
- top: 0
- bottom: 0
- text-align: right
- padding: 0px 5px
img_cell:
- align-items: center
- justify-content: center
4 Likes
didnt quite figure out what to do there, so in the mean time gave the button some more height (75px), and changed to icon_name, because I really want the state to be formatted differently than the name.
unfortunately, theirs no option to have state and label next to each other ? as documented they are vertically displayed, which takes yet again another line of height.
Would you consider adding an extra layout option to accomplish that please? SO we could have second line state_lable or On: 4 of 6 and Off: All 6
remarkable is that without changing anything in the layout, the space on the bigger button between name and state below it is bigger than on the shallower button, and the space between bottom and label is also biggerâŚ
What exactly do you want, I see many request in this message and the previous one? If you tell me exactly what you want I can send you the config to achieve it.
Thereâs no need for additional layouts, we can achieve anything with the current configurations options.
thanks for asking and the opportunity⌠all a bit overwhelming yet.
Last post above:
I guess ultimately Id love to have the 2nd line show more than 1 item, while they now are always on top of each other.
see layout: icon_name_state2nd which results in:
this is almost as I d love to have it, but I would rather have the second line show
On: 1 of 6
Previous post: have them all show on one line: icon_name_state_lable, and if that not being a (future) option for the card, have the second line be closer to the first. (Ive experimented with your suggestion but couldnât get it right just now, need more experimentation and fundamental understanding of CSSâŚ)
You can do this in the template_label for 1 of 6, but you wonât be able to have 2 colors. Just get the state and place it before the one of six in the label.
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
}
var i;
var status = entity.state;
var entities = entity.attributes.entity_id;
var count = 0;
for (i = 0; i < entities.length; i++) {
var state = states[entities[i]].state;
if (state === 'on') {
count += 1;
}
}
return capitalizeFirstLetter(status) +': ' + count.toString() + ' of ' + entities.length.toString();
1 Like
Thanks, Iâll try that instead. Funny how google searches make no mention of
for css.
1 Like
a yes, cool! thanks!
was using this now:
label_template: >
var i;
var entities = entity.attributes.entity_id;
var count = 0;
for (i = 0; i < entities.length; i++) {
var state = states[entities[i]].state;
if (state === 'on') {
count += 1;
}
}
if (count === 0) return 'All ' + entities.length.toString();
return count.toString() + ' of ' + entities.length.toString();
so guess that would become
label_template: >
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
}
var i;
var entities = entity.attributes.entity_id;
var count = 0;
for (i = 0; i < entities.length; i++) {
var state = states[entities[i]].state;
if (state === 'on') {
count += 1;
}
}
if (count === 0) return capitalizeFirstLetter(status) +': All ' + entities.length.toString();
return capitalizeFirstLetter(status) +': ' + count.toString() + ' of ' + entities.length.toString();
@Mariusthvdb you can have 2 colors actually
Donât forget: show_state: false and layout: icon_name_state2nd
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
}
var i;
var status = entity.state;
var entities = entity.attributes.entity_id;
var count = 0;
for (i = 0; i < entities.length; i++) {
var state = states[entities[i]].state;
if (state === 'on') {
count += 1;
}
}
var statusHTML = status === 'on' ? `<span style="color: #FF0000">${capitalizeFirstLetter(status)}</span>` : `<span style="color: #00FF00">${capitalizeFirstLetter(status)}</span>`
return statusHTML +': ' + count.toString() + ' of ' + entities.length.toString();
1 Like
was a little mistake in the capitalize template, it should be taking (entity.state) as string, not (status).
added an extra line for All on ( == entities.length)
label_template: >
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
}
var i;
var entities = entity.attributes.entity_id;
var count = 0;
for (i = 0; i < entities.length; i++) {
var state = states[entities[i]].state;
if (state === 'on') {
count += 1;
}
}
if (count === 0 || count === entities.length ) return capitalizeFirstLetter(entity.state) +': All ' + entities.length.toString();
return capitalizeFirstLetter(entity.state) +': ' + count.toString() + ' of ' + entities.length.toString();
another hack! cool, this is getting to be a nice little project of its own
have a look:
had to adjust the same (entity.state) in the variable, and importantly, add a ; after the variable declaration⌠glad we have inspector
it is getting a bit complicated though:
label_template: >
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
}
var i;
var entities = entity.attributes.entity_id;
var count = 0;
for (i = 0; i < entities.length; i++) {
var state = states[entities[i]].state;
if (state === 'on') {
count += 1;
}
}
var stateHTML = entity.state === 'on'
? `<span style="color: #FF0000">${capitalizeFirstLetter(entity.state)}</span>`
: `<span style="color: #00FF00">${capitalizeFirstLetter(entity.state)}</span>`;
if (count === 0 || count === entities.length ) return stateHTML +': All ' + entities.length.toString();
return stateHTML +': ' + count.toString() + ' of ' + entities.length.toString();
would you prefer we did it like that, or would it be a future possibility to have it built i the card to be able to do layout: icon_name_state_lable2nd âŚwhich of course would ultimately result in much cleaner card configs?
btw, can we use a name_template too? the would broaden the options significantly
1 Like
What device/browser are you using?
Please open a feature request on github, thatâs not too complex to add and would avoid using config-template-card just for that
1 Like
will do! thanks for asking.
in the meantime did I try this icon change, because I couldnât find any documentation on the possibility. Works just fine:
- <<: *custom_button_light
name: Frontdoor
# icon: 'mdi:door-closed'
entity: light.frontdoor
state:
- value: 'on'
icon: 'mdi:door-open'
- value: 'off'
icon: 'mdi:door-closed'
maybe add it to the docs?
it does change the formatting of the card somehow, has probably got to do with the anchor i am using for now. (off shouldnât show percentage brightness, and be greyâŚ)
You canât merge an array with achors.
If you have defined a state object in your achor, it will be completely overriden by the state object in your actual card.
Itâs already there: GitHub - custom-cards/button-card: âď¸ Lovelace button-card for home assistant
right. thanks, wont have to find a solution then⌠I hope this will be possible with the change youâll make soon for a global config and card config? Would be way to go.