That doesn’t seem to do anything unfortunately:
cards:
- type: custom:button-card
color_type: label-card
name: Beneden
color: rgb(75, 75, 77)
styles:
card:
- height: 25px
- border-radius: 0px
- box-shadow: 0px 0px
- margin-bottom: 0px 0px
I’ve noticed margin only works if you set the card width.
No luck there for me… 
Well you aren’t going to see changes there because you’re only using 1 card inside the stack…
Margin will work with a horizontal stack of buttons that have width set. Otherwise it will use 4px as a margin size by default around the entire card. It’s inherited from the paper-cards that all cards are based off of.
Hmm, I want the white space removed where I drew the green line (below). Is that possible in any way? It’s a button-card (label) in a vertical-stack with a horizontal-stack that houses the buttons below.
You can use a “custom:vertical-stack-in-card” for that purpose (though you could try padding/margins)
I’m fairly certain you won’t be able to remove that. That’s 8 pixels inherited from the paper card. I myself tried removing that spacing from just about everything I could and in some cases you just can’t remove it.
I guess I will keep it this way then. Vertical-stack-in-card didn’t work that well for me actually…
Hi @RomRider, would you mind advising how to fix the following layout issue I’m seeing please?
My buttons are split between having three, two and one button in a horizontal stack, and as you can see from the screenshots below, the text becomes less equally spaced vertically and off-centre as the button goes wider:
The code behind this is as follows:
anchors:
custom_button_lights: &custom_button_lights
type: "custom:button-card"
color_type: icon
color: auto
show_label: true
show_state: true
show_name: true
show_last_changed: true
size: 35px
hold_action:
action: more-info
styles:
card:
- border-radius: 10px
- height: 55px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- justify-self: start
- padding: 0px 5px
- font-size: 15px
state:
- justify-self: start
- font-size: 12px
- padding: 0px 5px
grid:
- grid-template-areas: '"n i" "s i" "l i"'
- grid-gap: 0px 5px
- grid-template-columns: 1fr 40%
- grid-template-rows: auto auto auto auto
state:
- value: 'on'
styles:
state:
- color: green
- value: 'off'
styles:
state:
- color: red
card:
- filter: brightness(40%)
icon:
- color: grey
custom_button_lights_title: &custom_button_lights_title
type: "custom:button-card"
color_type: card
show_icon: false
color: hsla(0, 0%, 98%, 0)
styles:
card:
- height: 19px
- font-weight: bold
- padding: 0px 0px
- box-shadow: none
name:
- justify-self: start
- color: white
- padding: 0px 5px
# - text-transform: uppercase
- letter-spacing: 0.2em
- font-familly: cursive
#Removed some conditional yaml
- type: horizontal-stack # TITLE - Lounge
cards:
- <<: *custom_button_lights_title
name: Lounge
- type: horizontal-stack # Lounge lvl 1
cards:
- <<: *custom_button_lights # Front Left
entity: light.colour_lounge_front_left
name: Front Left
icon: mdi:wall-sconce
- <<: *custom_button_lights # Front Right
entity: light.colour_lounge_front_right
name: Front Right
icon: mdi:wall-sconce
- <<: *custom_button_lights # Lamp Right
entity: light.colour_lounge_lamp_right
name: Lamp Right
icon: mdi:lamp
- type: horizontal-stack # Lounge lvl 2
cards:
- <<: *custom_button_lights # Rear Left
entity: light.colour_lounge_rear_left
name: Rear Left
icon: mdi:wall-sconce
- <<: *custom_button_lights # Rear Right
entity: light.colour_lounge_rear_right
name: Rear Right
icon: mdi:wall-sconce
- type: horizontal-stack # TITLE - Master Bedroom
cards:
- <<: *custom_button_lights_title
name: Master Bedroom
- type: horizontal-stack # Master Bedroom
cards:
- <<: *custom_button_lights # En-Suite
entity: light.ensuite
name: Master Bedroom En-Suite
icon: mdi:led-strip
I suspect it’s something to do with grid-template-rows so I’ve tried various combinations of auto, %, px with no luck. I even went back to the original grid options given in the fix example found here, but that just ended up looking like this:
Ideally I would like the Name near the top, State in the middle, and Label at the bottom please.
Thanks!
I’ve added it yes, but it’s not perfect especially for arrays (styles or state) as it will not merge them but concatenate them together. Fortunately for styles, the latest one wins (that’s the way CSS works), but for state, you won’t be able to overload an existing - value: xx for example.
There is no way to delete the margin, this is how home assistant works.
Try this:
styles:
card:
- border-radius: 10px
- height: 55px
- padding: 0px # the default padding is 4%, this is why the content moved down the wider the card gets
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
- align-self: start # added this
name:
- justify-self: start
- padding: 0px 5px
- font-size: 15px
- align-self: end # added this
state:
- justify-self: start
- font-size: 12px
- padding: 0px 5px
grid:
- grid-template-areas: '"n i" "s i" "l i"'
- grid-gap: 0px 5px
- grid-template-columns: 1fr 40%
- grid-template-rows: 1fr min-content 1fr # You had one too many row
NEW FEATURES
Configuration templating support:
In ui-lovelace.yaml (or in another file using !import)
button_card_templates:
header:
styles:
card:
- padding: 5px 15px
- background-color: var(--paper-item-icon-active-color)
name:
- text-transform: uppercase
- color: var(--primary-background-color)
- justify-self: start
- font-weight: bold
label:
- text-transform: uppercase
- color: var(--primary-background-color)
- justify-self: start
- font-weight: bold
header_red:
template: header
styles:
card:
- background-color: '#FF0000'
my_little_template:
[...]
And then where you use button-card, you can apply this template, and/or overload it:
- type: custom:button-card
template: header
name: My Test Header
To ease template usage, you can now refer to the entity assigned to the button on a call-service action using the entity keyword in the entity_id parameter:
- type: custom:button-card
entity: cover.mycover
tap_action:
action: call-service
service: cover.open_cover
service_data:
entity_id: entity ## This will actually call the service on cover.mycover
FIXES
Great work - looking forward to adding templates!
Is anyone else seeing issues using button cards in conditional (or the custom state-switch) cards? For me they aren’t displayed on a page refresh if they’re hidden at the time of refresh. It takes either another refresh or a page resize to get them to display.
Happening with a few custom components, although seems most frequent with button cards on an android tablet (Nexus 7). I’ve raised this on GitHub with the frontend and seems it’s a custom component issue (but affecting lots of them).
@mynameisdaniel I had that problem a few versions of HA ago but it hasn’t happened since maybe 0.89 or 0.90. Which version are you using?
Use card-loader to fix that issue 
put it above the conditional card and wait for all your custom card types that you use in the conditional.
Thank you! Of course there’s a custom card to fix custom cards 
HI,
Please let me repost this Lovelace: Button card now that I am getting more acquainted with the Button card, and feeling the comfort of this card in Lovelace compared to that of the Tiles card. Not to mention the speed of development you tend to deploy…
Id really need the possibility to set entity_picture_templates. Ive carefully read the full documentation, but down think that is available right now, even with the latest templating addition? I know I can set picture in state, but that only allows for on/off/unavailabe.
In my particular need, and I can think of many other that require a picture based on other values than these 3, I need pictures based on the state of the zone a device is in.
My current template (for Tiles) is like this:
entities:
- entity: device_tracker.life360_name
templates:
background: >
if (state === 'home' || state === 'not_home') return 'url(\"/local/tiles/family/name_' + state + '.png\")';
return 'url(\"/local/tiles/family/name_' + entities['sensor.name_location_picture'].state + '.png\")';
style: >
if (state === 'home') return 'background-color: #008000';
if (state === 'not_home') return 'background-color: #808080';
return 'background-color: #643aac';
would you consider creating the option to allow js templates for entity_pictures? hoping that
entity_picture_template: >
if (entity.state === 'home' || entity.state === 'not_home') return 'url(\"/local/tiles/family/name_' + entity.state + '.png\")';
return 'url(\"/local/tiles/family/name_' + entities['sensor.name_location_picture'].state + '.png\")';
would be just as feasible as the label_template we made a few posts above 
secondly: can we point the more-info to another entity than the button entity. Use case: with device trackers, we tend to have more than 1 per person, and collect these in a group. My specific setting above, Id want the button to have the entity of my life360 device tracker, but the more-info to open up the group.name which holds all device-trackers for that person. Could be anything really, but in this case really very useful information is revealed.
Thanks for having a look!
Introducing that for entity_picture will lead to having everything as a template in a not far future as everyone has specific needs and I don’t think it’s a good idea. For now, the way to achieve that is by using the config-template-card which enables you to do templates on all the fields.
Yes, I’ll do that, would you mind opening a feature request on github please? No need to be exhaustive as it’s pretty simple to understand
great. opened the feature request referring to this.
not so great… 
well suppose you’re right. its because the majestic lack of native templating in Lovelace this is happening. Its plain necessary…
btw, next to name (already in feature request discussed with you) and label_template (already in function) only image templates are left … a JS template would merely be a placeholder for the image ‘string’ as you state it to be in the docs.
Hope you keep it in your mind, to enable if and when opportunity arises.
I will certainly follow your suggestion for the templater card, but truly feel this is what Lovelace makes more and more unapproachable, having to nest custom cards in custom cards, which each on their own are developing in different speeds and details.
Makes it rather cumbersome to maintain ones configuration…
Your Button card is taking over my config any time soon though. What magic you are allowing us to use.
thanks for that.