This "null" is a string, it should be else return null;
That’s because of the padding of the card. By default it’s a %age of the width (and you’ve also set it to a %age, which is based on the width), so set it to something static and you’ll be good to go.
styles:
card:
- padding: 6px
yes, that’s the way to go (I think). I use this on many of my views: 1 single button in the same size as all my other buttons, (that have 4 in a row).
Could probably even declutter that in a ‘solo_button’ template 
- type: horizontal-stack
cards:
- !include /config/lovelace/includes/include_button_sensor_home.yaml
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
Hey there,
I am just new to this fantastic card.
Actually I try to show a label with the value of an entity. But nothing is shown.
Could one of your experts have a look, what I am doing wrong?
icon: 'fas:couch'
color: 'rgb(47, 186, 229)'
size: 40%
name: Wohnzimmer
entity: sensor.heizung_wohnzimmer_temperature
label_template: |
return '°C: ' + entity.state
show_label: true
styles:
card:
- width: 210px
- height: 140px
- font-size: 16px
- font-weight: bold
name:
- justify-self: center
- margin-bottom: 25px
grid:
- position: relative
custom_fields:
notification:
- background-color: |
[[[
if (0 == 0)
return "green";
return "red";
]]]
- border-radius: 70%
- position: absolute
- left: 85%
- top: 10%
- height: 20px
- width: 20px
- font-size: 10px
- line-height: 20px
notification1:
- background-color: |
[[[
if (1 == 0)
return "green";
return "red";
]]]
- border-radius: 70%
- position: absolute
- left: 85%
- top: 35%
- height: 20px
- width: 20px
- font-size: 8px
- line-height: 20px
custom_fields:
notification: >
<ha-icon icon="mdi:windows" style="width: 12px; height: 12px; color:
deepskyblue;"></ha-icon>
notification1: >
<ha-icon icon="mdi:google" style="width: 12px; height: 12px; color:
deepskyblue;"></ha-icon>
Greeting Nic
That doesn’t exist anymore for a long time.
Please read the documentation on github about templates.
label: |
[[[ return '°C: ' + entity.state; ]]]
How do I remove the space between the vertical stacks? These are 5x5 Button cards modded with card-mod
Thank you for your reply! I made the change you’ve helpfully suggested but it doesn’t seem to have solved the problem yet. I am still digging to understand why it isn’t working as I hope.
In case a visual is helpful –
Motion:
No Motion.
The icon changes as it should but the color does not. If I refresh the browser, it appears gray as it should.
I can’t help you with that. But would you mind sharing this card? Looking awesome.
I don’t think you can modify the margin between button cards, unless @RomRider can point me to the correct selector.
Here is what element you need to adjust:
This is the card mod selector I tried but doesn’t appear to work.
style:
.: |
#root > * {
margin: 0px !important;
}
Side note: Did you ask this question on reddit? If so, I replied there but it’s easier to markdown here so hopefully this might point you in the correct direction.
yes the post was very similar and from me. thanks for your reply.
for everyone else: this is what the reddit post is about.
So its not possible yet with button card to move cards closer together?
This card is amazing. I wish I had gotten on board sooner. I was looking for a replacement for my light tiles cards and a way to make core glance cards more compact and clearer. Fits the bill perfectly. Such a powerful card once you get the hang of the internal layout. I might replace core switches next.
I’ve saved hundreds of lines of Lovelace code through the use of button card templates (compared to the tiles card).
Thanks Rom! Your repository is only missing one thing, a buy me a ‘coffee’ link. 
This isn’t really (uniquely) a button card question but…
…how can I check if an entity exists? e.g.
label: >
[[[
If (states['sensor.mysensor'].state exists) : states['sensor.mysensor'].state ? 'No such entity';
]]]you mean like this:
- type: custom:button-card
entity: group.all_inside_lights
show_label: true
label: >
[[[
return entity ? entity.state : 'No such entity';
]]]
?
Yes almost but what if I want to check an entity that isn’t the entity?
(It must be obvious and I just can’t get the syntax right)
- type: custom:button-card
entity: group.all_inside_lights
show_label: true
label: >
[[[
return some.other_entity ? entity.state : 'No such entity';
]]]
This should do it:
return states['some.other_entity'] ? "exists" : "doesn't exist"
Lots of buttons have changed size in 0.110.0b0… they have a new way of doing the mdi icons now.
In my case it seems only icons using the padlock (lock function). Some icons are small but I can use CSS to resize I guess…
Tried setting aspect ratio:
So that sucks. How do I make all the icons look the same?
I’ve got styles: height, width set using CSS vh, vw and I now have very nice custom:button-card overlays on a picture-elements card using entity-pictures and tap actions. (I tried percent for them, but it rendered a button about 1x1 px irrespective of the %). So, “Ready to Arm”, numbers, the temperature, and “Ready” are button-cards overlaid on picture-elements base.
However, the button-card overlays don’t scale correctly with changing screen-size. I created the view at 80% zoom in Firefox. Change to 100% and the overlays shrink, relatively. They seem to have kept their original h/width as the underlying image scaled up to fit the screen-size. (Note that I’m selectively using lovelace-gen macros in this view for the numeric buttons, FWIW).
Even worse on the phone where the overlays shrank dramatically relative to the base image. Both “panel” and non-panel views do this.
Is the HA vw/wh scaling not aware of the HA “viewport”? Is the HA viewport some special thing? Is the %'s not working related to this?
Or, can I access viewport parameters and do my own arithmetic scaling in JS of the button-card overlays for different screen layouts?
I’d like not to create special views for all my devices…
Here’s the code for the “Ready” image:
- type: custom:button-card
triggers_update:
- alarm.control_panel_house
style:
left: 35.6%
top: 41.4%
show_icon: false
show_name: false
show_label: false
show_state: false
show_entity_picture: true
entity_picture: >
[[[
var to_arm = states['alarm_control_panel.house'].attributes.arm_up_state;
if (to_arm.trim() == 'ready_to_arm')
return '/local/images/Elk_ready.png';
else
return '';
]]]
tap_action:
action: 'none'
styles:
card:
- width: 12.5vw
- heigth: 12.5vh
- border: 'none'
- background-color: 'transparent'
- box-shadow: 'none'
How do I get the names to vertically justify to the bottom of the cards (just above the card padding) without using top padding in the name (that causes problems on smaller displays)?
Relevant bits of config:
switch_button:
aspect_ratio: 4/3
layout: icon_state
show_label: false
styles:
card:
- border-radius: 10px
- padding: 3px 3px 3px 3px
- margin: 0% 0% 0% 0%
- '--paper-card-background-color': 'rgba(0, 0, 0, 0)'
grid:
- grid-template-rows: 33% auto 0
- grid-template-columns: 33% auto
name:
- justify-self: centre
- font-size: 14px
- padding: 0px 0px 0px 0px
- color: var(--primary-text-color)
- white-space: normal
- vertical-align: baseline # does not work, neither does 'bottom'
I’ve tried custom grid layouts like "i s" "n n" but it has the same problem, name always centred vertically.
I think, but I’m no css wizard expert
It should be
name:
- justify-self: start
- text-align: center # I see you used 'centre'. Does that even work? I would love to stop being Americanised!
As I said I’m no expert but you could try that until one comes along.
Hey guys, i feel like im missing something, I’m trying to get some sort of recognition that I tapped a button on the mobile app, for example if i hit a button in the web UI, i get a quick darkening of the button and a nice but quick animation, then the ‘light’ turns on and the state changes forcing a color change of the button to yellow, but sometimes there are delays and so on the mobile app I will tap a button, but it wont look like anything has happened for a second or two, and then things start moving. Does anyone know how to get a quick animation on tap that works on the mobile app?