It seems you reduced the size of the button that’s why it is happening. In the previous version the lock was a child of the button, now it’s a sibling.
You can do it like this:
styles:
lock:
- padding-right: 20px #(or any other value, the default being 7px)
@RomRider Long time no see, good to see you’re still alive and kicking! Anyways I wanted to mention that an old bug has arisen since your last updates. When tapping on a button to select next option (for use with e.g. input_select) it will press it twice again. You have fixed this in the past but now it is back for some reason. Don’t know if anyone has already mentioned it.
If you want me to raise an issue on git I will.
This is strange as I am now using the latest core code to handle clicks and there do not seem to be any report of this problem with it. Would you mind trying with the core button please? (I don’t have the problem on my iPad with latest stable IOS)
HI Romrider,
since the latest 2 or 3 updates (starting with 3.2.0) my switches toggle only after quite some time, if at all, and I find myself re-tapping the button.
Ive just tested this with the identical switches on a regular entities card, and they do seem to respond quite swiftly. Could this at all be possible?
my switches are template and/or command-line switches, but I don’t think that will make a difference? Ive used these for almost 3 years now without changing them…
my button-card switches look like this (forgive me for not having adapted the new state_display yet still using my own here…):
button_switch_statedisplay:
color: auto-no-temperature
size: 30%
aspect_ratio: 1/1
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: success
show_last_changed: true
styles:
card:
- padding-left: 5px
name:
- justify-self: start
- font-weight: bold
- font-family: Helvetica
- font-size: 13px
- text-overflow: unset
- white-space: unset
- word-break: break-word
- text-align: start
label:
- font-size: 11px
- font-family: Helvetica
- justify-self: start
grid:
- grid-template-areas: '"i" "n" "stateDisplay" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- justify-content: start
- align-items: start
state:
- value: 'on'
custom_fields:
stateDisplay: >
[[[ var id = entity.entity_id.split('.')[1].slice(3, -9);
var fakestate = `<span style="color: ##555B65;"> ${entity.state}</span>`;
var fakelabel = `<span style="color: red;"> ${states['sensor.' + id + '_actueel'].state} W</span>`;
return fakestate +': ' + fakelabel;]]]
styles:
card:
- color: '#555B65' #'#5daf35'
- background-color: '#F0C209'
icon:
- color: '#555B65'
custom_fields:
stateDisplay:
- font-size: 11px
- font-family: Helvetica
- justify-self: start
- text-transform: capitalize
- font-weight: bold
# - color: black
id: on-icon
- value: 'off'
custom_fields:
stateDisplay: >
[[[ return entity.state ]]]
styles:
card:
- color: '#F0C209'
- background-color: '#555B65'
icon:
- color: '#F0C209'
custom_fields:
stateDisplay:
- font-size: 11px
- font-family: Helvetica
- justify-self: start
- text-transform: capitalize
- font-weight: bold
# - color: rgba(0, 0, 0, 0.0)
id: off-icon
- value: 'unavailable'
custom_fields:
stateDisplay: >
[[[ return entity.state ]]]
styles:
card:
- opacity: 0.6
- color: grey
- --paper-item-icon-color: grey
custom_fields:
stateDisplay:
- font-size: 11px
- font-family: Helvetica
- justify-self: start
- text-transform: capitalize
- font-weight: bold
- color: '#D3D3D3'
don’t see errors in the logs. Could this be?
I don’t have this problem on any device I tested (ipad, android phone, ff, chrome and safari).
Does someone here see the same thing as @Mariusthvdb?
For additional information, I use the exact same code as core to handle anything related to *_action
Hi,
is there a way to reduce the size of the card frame so that it does not overlay everything in the floorplan?
Where do I put my button-card templates if I’m using the UI configuration method? The docs say to put them in ui-lovelace.yaml but I don’t have one.
You can create a Manual card and then paste your config there. If need to change anything, click Edit and do it as above. Or you can use Raw Editor.
Mind it that you won’t be happy with if you rely on LL in terms of storing your config as it reformat it and removes all comments. I have separate .yaml files with config of my cards and if I need to change something, I edit it, go to UI and paste it, check if it works and then save changes to my .yaml file.
Thanks, but I know how to use Manual card. I mean the configuration templates that are part of the Button Card features, not an individual card config.
Sorry, I misunderstood you.
Open Raw Editor and paste them at the same level as resources (top)
hi!
in an above reply i saw a post of a button card with a circle-sensor-card in it to show the brightness of the light from the button card (@lubbertkramer). if i try his code it won’t show the brightness. But if i change the circle-sensor-card’s entity ('[[brightness]]') to my light’s entity then it shows just the on/off state. As you can see in the picture, that’s the current state. hope someone can help me. Thanks!!
type: 'custom:button-card'
name: Ledstrip Kast
icon: 'mdi:led-strip-variant'
entity: light.wled_kast
color: auto
aspect_ratio: 1/1
show_state: true
show_label: false
tap_action:
action: toggle
haptic: light
styles:
card:
- border-radius: 10px
- width: 105px
- height: 105px
state:
- font-size: 11px
- font-family: Helvetica
- margin-left: auto
- margin-right: auto
- text-transform: capitalize
- font-weight: bold
grid:
- grid-template-areas: '"n n" "i i" "s brightness"'
- grid-template-rows: 1fr 2fr 1fr
- grid-template-columns: 1fr 1fr
img_cell:
- align-self: center
- text-align: start
name:
- justify-self: start
- margin-left: auto
- margin-right: auto
- font-weight: bold
- font-family: Helvetica
- font-size: 13px
label:
- font-family: Helvetica
- font-size: 14px
- font-weight: bold
- padding: 0px 10px
- justify-self: start
- padding-right: 10px
custom_fields:
brightness:
- max: 100
- min: 0
- width: 2em
- overflow: visible
- position: absolute
- left: 4em
- top: 4em
custom_fields:
brightness:
card:
type: 'custom:circle-sensor-card'
entity: light.wled_kast
max: 100
min: 0
stroke_width: 15
stroke_color: var(--theme-button-icon-color-state-on)
gradient: true
font_style:
color: var(--theme-button-name-color-state-on)
label: |
[[[
if (typeof(entity) === 'undefined') return;
if ('brightness' in entity.attributes)
{
if (entity.attributes
&& (entity.attributes.brightness <= 255)) {
var bri = Math.round(entity.attributes.brightness / 2.55);
return (bri ? bri : '0') + '%';
}
}
]]]
state:
- value: '[[[ return '''' + entity.state + ''''; ]]]'
spin: '[[spin]]'
styles:
card:
- '--ha-card-background': >-
[[[ return 'var(--theme-button-card-color-state-' + entity.state +
')'; ]]]
icon:
- color: >-
[[[ return 'var(--theme-button-icon-color-state-' + entity.state +
')'; ]]]
- animation: >-
[[[ return 'var(--theme-button-icon-animation-state-' + entity.state
+ ')'; ]]]
lock:
- color: >-
[[[ return 'var(--theme-button-lock-color-state-' + entity.state +
')'; ]]]
label:
- color: >-
[[[ return 'var(--theme-button-label-color-state-' + entity.state +
')'; ]]]
name:
- color: >-
[[[ return 'var(--theme-button-name-color-state-' + entity.state +
')'; ]]]
state:
- color: >-
[[[ return 'var(--theme-button-state-color-state-' + entity.state +
')'; ]]]
custom_fields:
brightness:
- fill: >-
[[[ return 'var(--theme-button-card-color-state-' + entity.state +
')'; ]]]
entity.attributes.brightness should be the way to go.
since the latest release I encounter a weird behaviour.
I have the following card (pre 3.2.3):
As soon as I update to the newest release it looks like this (white overlay):
Interestingly this only happens in Safari (also tried it in Firefox).
The yaml in question:
- type: custom:mod-card # robovac
style: |
ha-card {
height: 115px;
background-color: var(--primary-background-color);
border-radius: 15px;
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-4px -4px 4px 0 rgba(255,255,255,.5),4px 4px 4px 0 rgba(0,0,0,.03);
{% else %}
-4px -4px 4px 0 rgba(50, 50, 50,.5),4px 4px 4px 0 rgba(0,0,0,.15);
{% endif %}
}
card:
type: custom:vertical-stack-in-card
cards:
- type: entities
entities:
- entity: vacuum.robovac
type: custom:multiple-entity-row
name: Robovac
show_state: false
entities:
- attribute: status
name: Status
- attribute: battery_level
name: Battery
unit: '%'
- entity: counter.vacuum_counter
name: Count
style: |
ha-card {
height: 70px;
}
- type: horizontal-stack
cards:
- type: custom:button-card
color: auto
entity: vacuum.robovac
size: 25%
icon: mdi:play
show_name: false
tap_action:
action: call-service
service: vacuum.turn_on
service_data:
entity_id: vacuum.robovac
- type: custom:button-card
color: auto
entity: vacuum.robovac
size: 25%
icon: mdi:pause
show_name: false
tap_action:
action: call-service
service: vacuum.pause
service_data:
entity_id: vacuum.robovac
- type: custom:button-card
color: auto
entity: vacuum.robovac
size: 25%
icon: mdi:broom
show_name: false
tap_action:
action: call-service
service: vacuum.clean_spot
service_data:
entity_id: vacuum.robovac
- type: custom:button-card
color: auto
entity: vacuum.robovac
size: 25%
icon: mdi:map-marker
show_name: false
tap_action:
action: call-service
service: vacuum.locate
service_data:
entity_id: vacuum.robovac
- type: custom:button-card
color: auto
entity: vacuum.robovac
size: 25%
icon: mdi:home-map-marker
show_name: false
tap_action:
action: call-service
service: vacuum.return_to_base
service_data:
entity_id: vacuum.robovac
What i did was using a custom field for a sensor template which shows the brightness. In my template i refer to the custom button card config that’s in my lovelace. That’s why only [[brightness]] is used, that maps to sensor.brightnesshal for example
- type: custom:decluttering-card
template: button_default
variables:
- entity: light.hal
- name: Hal
- icon: 'mdi:lightbulb'
- brightness: sensor.lighthal
This is related to vertical-stack-in-card, not button-card.
Fortunately, I’ve just created a drop-in replacement for vertical-stack-in-card which supports 0.107.0 and an bunch of other features 
Check it out here:
thanks for this, we needed a new vertical-stack-in-card! Love the new functionality this offers at a glance, will dive in . Much appreciated!
Not sure if this solves our ‘grid’ demand, but certainly offers immediate benefits. Cool!
My lights can be controlled but there is no way to know if the light is on or off. That is the reason that I want to have a button with two type areas: one for on and one for off (in the same button).
Is it possible to achieve that with the button card? can I somehow define two tap areas on the button?
Thx
Yes, using custom_fields you can embed 2 other button cards inside the button-card, one for on and one for off 
I have succeeded to create some initial demo of such button. Thx. I’ve got strange issue. If I call the light.turn_on service directly, the light turn on and off. If I create script for turn on / off, the card work as expected. Any idea why (below is the working version)?
- type: custom:button-card
name: "Light"
aspect_ratio: 1/1
custom_fields:
'on':
card:
type: custom:button-card
name: 'ON'
icon: mdi:lightbulb-outline
style: |
ha-card {
box-shadow: none;
}
tap_action:
action: call-service
service: script.light_turn_on
service_data:
entity_id: light_008
'off':
card:
type: custom:button-card
name: 'OFF'
icon: mdi:lightbulb-off-outline
style: |
ha-card {
box-shadow: none;
}
tap_action:
action: call-service
service: script.light_turn_off
service_data:
entity_id: light_008
styles:
custom_fields:
'on':
- overflow: unset
card:
- overflow: unset
grid:
- grid-template-areas: '"n n" "on off"'
- grid-template-columns: 50% 50%
- grid-template-rows: 50% 50%