The only thing which sets the space between 2 cards is the parent card (grid, vertical-stack, horizontal-stack, etc…)
There’s no config validation in button-card. Not defining templates is not an error, not everyone uses templates 
I could block any non-valid parameter (in your case template) in the config but that would break so many configurations that I won’t do it for this card, it’s now too late to introduce that feature for button-card.
I’m however doing strict configuration checks for all my new cards now.
Thanks so much. I already had custom:button installed and knew I wasn’t using it in the example I provided. It was the below I was having trouble with. Thank again. Works perfectly.
styles:
card:
- border-radius: 25px # change the number here
You could reduce the text size using card-mod but it’s going to be really small
Now to learn how to use this with badges. Thanks.
@RomRider I’ve changed the custom buttons to be rounded, thank you. Is there a way to have them all within a single card with a translucent background, like the card above?
type: vertical-stack
title: Apple TV
cards:
- type: horizontal-stack
cards:
- type: 'custom:button-card'
styles:
card:
- border-radius: 40px
tap_action:
action: toggle
entity: script.1601352218343
icon: 'hass:power'
icon_height: 40px
name: 'On'
- type: 'custom:button-card'
styles:
card:
- border-radius: 40px
tap_action:
action: toggle
entity: script.apple_tv_deck_off
icon: 'hass:power'
name: 'Off'
icon_height: 40px
- cards:
- type: 'custom:button-card'
styles:
card:
- border-radius: 40px
entity: remote.deck
hold_action:
action: none
icon: 'mdi:arrow-left'
name: Left
show_icon: true
show_name: false
tap_action:
action: call-service
service: remote.send_command
service_data:
command: left
entity_id: remote.deck
- type: 'custom:button-card'
styles:
card:
- border-radius: 40px
entity: remote.deck
hold_action:
action: ''
icon: 'mdi:apple'
name: Enter
show_icon: true
show_name: false
tap_action:
action: call-service
service: remote.send_command
service_data:
command: select
entity_id: remote.deck
- type: 'custom:button-card'
styles:
card:
- border-radius: 40px
entity: remote.deck
hold_action:
action: none
icon: 'mdi:arrow-right'
name: Right
show_icon: true
show_name: false
tap_action:
action: call-service
service: remote.send_command
service_data:
command: right
entity_id: remote.deck
type: horizontal-stack
- cards:
- type: 'custom:button-card'
styles:
card:
- border-radius: 40px
entity: remote.deck
hold_action:
action: none
icon: 'mdi:arrow-up'
name: Up
show_icon: true
show_name: false
tap_action:
action: call-service
service: remote.send_command
service_data:
command: up
entity_id: remote.deck
- type: 'custom:button-card'
styles:
card:
- border-radius: 40px
entity: remote.deck
hold_action:
action: none
icon: 'mdi:menu'
name: Menu
show_icon: true
show_name: false
tap_action:
action: call-service
service: remote.send_command
service_data:
command: menu
- type: 'custom:button-card'
styles:
card:
- border-radius: 40px
entity: remote.deck
hold_action:
action: none
icon: 'mdi:arrow-down'
name: Down
show_icon: true
show_name: false
tap_action:
action: call-service
service: remote.send_command
service_data:
command: down
entity_id: remote.deck
type: horizontal-stack
- type: horizontal-stack
cards:
- type: 'custom:button-card'
styles:
card:
- border-radius: 40px
tap_action:
action: call-service
service: script.deck_volume_up
name: Vol Up
icon: 'mdi:volume-plus'
icon_height: 55px
show_name: false
hold_action:
action: ''
- type: 'custom:button-card'
styles:
card:
- border-radius: 40px
tap_action:
action: call-service
service: script.deck_volume_down
name: Vol Down
icon: 'mdi:volume-minus'
icon_height: 55px
show_name: false
hold_action:
action: ''
There’s 2 solutions for that:
- One of my other cards:
stack-in-card vertical-stack-in-card
Pick the one you like 
Thanks for your prompt response. I’ll take a look. Thanks again. 
No, it was defining the erroneous templates: that made it happen…
yeah that’s what I thought, but look what happens:
using a correct template config_title, white a nested but erroneously used templates:
config_title:
templates: styles_card
layout: icon_label
size: 40%
show_label: true
show_name: false
styles:
label:
- font-size: 14px
- font-weight: bold
- justify-self: start
off:
on:
and using the correct
config_title:
template: styles_card
etcetc
off:
on:
the spacing between the header card (which uses the template) and the cards below it is decreased, and even the icon is lost in the card (or the color is set to the background color, hard to check…)
these are stacked in a core vertical stack:
type: vertical-stack
cards:
- type: custom:button-card
entity: group.all_outside_lights
group_expand: true
template: button_title_outdoors # <-- using the nested template
label: >
[[[
if (!entity) return 0;
function loop(list, stats = {total: 0, enabled : 0}) {
list.forEach(child_entity => {
if (states[child_entity])
if (child_entity.split('.')[0] == 'group') {
stats = loop(states[child_entity].attributes.entity_id, stats);
} else {
stats.total += 1;
if (['open', 'on'].includes(states[child_entity].state))
stats.enabled += 1;
}
});
return stats;
}
let stats = loop(entity.attributes.entity_id);
if (stats.enabled == stats.total) return 'All ' + stats.enabled + ' lights on';
if (stats.enabled == 0) return 'No lights on';
return 'Lights on: ' + stats.enabled + ' of ' + stats.total;
]]]
- type: horizontal-stack
cards:
- type: custom:button-card
template: button_light_outdoors
entity: light.backdoor_outdoors
name: Backdoor
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
template: button_light_outdoors
entity: light.garden_terrace_floodlight
name: Gard Terr.
btw, I recently noticed on the last_changed line we sometimes see In 6 seconds, which is another mystery to me… how would the button now 
Yeah right, sorry, I inverted what I wanted to say 
But you get the point.
Probably something is overflowing the button, generating this bigger gap in your working use case.
That’s because your server is not exactly at the same time than your computer displaying the page (your computer is behind the time on the server by 6 seconds). Since the the computation of the time difference between now and the value of last_changed happens in your browser, you can get this behaviour 
NTP is your friend
Are you saying here the smaller gap is what it is supposed to be? I ask because all my buttons everywhere have the bigger gap…
I see. Had to use my other friend to find NTP…
still, is this new, because I truly had never seen it before, and now see it all the time, where before it said Just now ? Its really silly, and I would love to have the trusty Just now back
The time on your different computers is important. You should fix that, it’s not a display issue. Some people want to display information from the future (i.e. In 20 days for birthdays for eg.)
I dont get it, flipped the light once more just now:
yeah I see that, and even use that myself, though mostly with a templated label, and not the last_changed field.
wouldn’t know what to do about that, or where to start looking… this is rather freaking me out now.
Would it be possible to use this nice looking card to have:
- Six (6) “radio buttons” so only one is selected
- Each button to set specific a parameter on a z-wave device similar to below
action:
service: zwave.set_config_parameter
data_template: {
"node_id": 7,
"parameter": 72,
"value": <the-individual-value-per-button>,
}
Any example would be great
I’d use an input_select for that. Trigger an automation to apply your zwave parameters based on the value of your input_select. And for the buttons use the input_select current option to verify if it’s on or off and the tap_action to select the right option amongst the input_select options.
I want to share my very simple digital and analogue clocks I’ve created using this button card. I’ve evaluated all the existing clock cards over a long time and none of them quite met my needs or were sufficiently flexible in terms of layout and colours. I like seeing an analogue clock because (at least for me) it’s very fast to gauge whether it’s morning, noon or night for a few places around the world.
There are probably more ways to achieve this but I thought it was quite elegant due to the excellent features of this card. You don’t need any extra JavaScript libs such as moment.js which is, of course, really neat (you could replace it here, if you’d like). The analogue display are just MDI icons. Lastly, you need to create some sensors using the worldclock integration. Technically, I suppose you can keep all of this in pure JavaScript but I want the cards to update automatically without additional JavaScript (if it’s even possible in this case because I’m not sure where that background task would need to be coded and run).
The template:
button_card_templates:
clock:
variables:
timezone: "Continent/City"
show_name: true
show_state: true
show_icon: true
show_label: true
label: >
[[[
return (new Date()).toLocaleDateString("en-ZA", {timeZone: variables.timezone});
]]]
icon: >
[[[
var hourNamesIndexed = ["twelve", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven", "twelve"];
var timeParts = (new Date()).toLocaleTimeString("en-ZA", {timeZone: variables.timezone, hour12: true}).split(':');
var hour = parseInt(timeParts[0]);
var minute = parseInt(timeParts[1]);
return "mdi:clock-time-" + hourNamesIndexed[hour] + "-outline";
]]]
color: var(--paper-item-icon-color)
styles:
grid:
- grid-template-areas: '"n" "i" "s" "l"'
name:
- color: var(--secondary-text-color)
- font-size: 1rem
state:
- color: var(--secondary-text-color)
- font-size: 0.8rem
label:
- color: var(--secondary-text-color)
- font-size: 0.8rem
tap_action: none
The cards as in the image:
- type: horizontal-stack
title: Clocks
cards:
- type: custom:button-card
template: clock
variables:
timezone: Africa/Johannesburg
name: Cape Town
entity: sensor.cape_town
- type: custom:button-card
template: clock
variables:
timezone: America/Los_Angeles
name: San Francisco
entity: sensor.san_francisco
- type: custom:button-card
template: clock
variables:
timezone: Europe/London
name: London
entity: sensor.london
2 Likes
When using Packages system woudl it be sufficient to just have the file.yaml starting with the
button_card_templates:
- template 1:
or do I need to use the ui-lovelace.yaml ?
You can’t put that anywhere else than the yaml file of your dashboard. Packages don’t work.
1 Like
Hi Guys i’ve had some great help from someone trying to set up a button card.
Basically i want the card to toggle a script to ‘on’ but change the colour of the icon based on the state of a separate sensor.
This is the code he suggested but for some reason it won’t change the icon colour.
type: 'custom:button-card'
state:
- operator: template
value: >
[[[return (states["sensor.home_boost"].state === 'on')]]]
styles:
icon:
- color: red
- animation: blink 2s linear infinite
tap_action:
action: toggle
entity: [your script name here]
So i was looking at the examples on the github for this button and tried copying some of that code to see if i could get it working so i thought this might work but still no luck.
type: 'custom:button-card'
state:
- operator: template
value: |
[[[
return (states['sensor.home_boost'].state === 'on')
]]]
icon:
- color: 'rgb(255, 140, 0)'
tap_action:
action: toggle
entity: script.boost
As you can see in the picture the basic entity card confirms the sensors saying is ON but the flame icon hasn’t changed.
Thanks for any help
First one is correct, the second one is wrong.
But I think the reason the first one is not working is because your state is ON and not on.
So make it: [[[return (states["sensor.home_boost"].state === 'ON')]]]