That should work (probably?):
styles:
card:
# remove the "+ 'px'" if it's already in your state
- border-radius: "[[[ return states['input_select.border_radius'].state + 'px' ]]]"
I had px already in the code. This seems to work. Thanks a lot. I literally tried so many different configurations.
Thanks a lot @RomRider
is there a difference between the style = height/width in the zone_image template, and the use of the
styles:
custom_fields:
zone_image:
width:
height:
I cant seem to pin it down completely, though it seems to show alright now, on smaller button cards (3 in 1row). If I have only 1 button, which is then much larger, the overlay (zone_image) doesnt enlarge proportionally
correct size for 3 in a row
incorrectly sized on larger button (seems even smaller):
using this for the card now:
button_picture_family:
size: 75%
show_state: false
show_label: false
show_name: false
show_entity_picture: true
color_type: card
aspect_ratio: 1/1
tap_action:
action: more-info
entity: >
[[[
var id = entity.entity_id.split('_')[2];
return 'group.' + id;
]]]
haptic: light
hold_action:
action: more-info
entity: >
[[[
var id = entity.entity_id.split('_')[2];
return 'group.' + id;
]]]
haptic: success
entity_picture: >
[[[
var id = entity.entity_id.split('_')[2];
return states['sensor.' + id + '_picture'].state;
]]]
styles:
entity_picture:
- border-radius: 6px
custom_fields:
zone_image:
- align-items: flex-start
- justify-content: flex-end
- padding: 2px 2px
- position: absolute
- right: 12%
- bottom: 10%
- height: 30%
- width: 30%
card:
- border-radius: 6px
- box-shadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'
- background-color: >
[[[
var id = entity.entity_id.split('_')[2];
return states['sensor.' + id + '_background_color'].state
]]]
custom_fields:
zone_image: >
[[[
var id = entity.entity_id.split('_')[2];
return `<img src= "${states['sensor.' + id + '_overlay_image'].state}" style="height: 30px; width: 30px;">`
]]]
1 Like
can you help, by explain, i want to the same, but without zone sensor, i’m only using one entity which is the device tracker.
can you help with the code?
this is the entity device_tracker.b4_f1_da_ec_sd_sd
depends really, on what you want. If you want a button with the entity_picture of the device_tracker, the code is posted above. Just leave out the custom_field parts. and adjust a template to your setup.
If you need something else, you should be a bit more specific…
HI @RomRider
coming from @jimz011 s topic Homekit Infused (HKI) v2.0.0 Release Candidate (Beta 11) - Updated 31/05/2020 please let me ask if it is possible to have the button-card respect the entity-settings for icon-color already available in Ha.
If I use an entity, this is is displayed with the correct icon (if set in the backend already) without adding extra settings in the custom:button-card.
icon-color however seems not to be recognized?
eg this simple example:
sensor.cpu_temperature:
icon: mdi:thermometer
templates:
icon_color: >
if (state < 60) return 'green';
if (state < 65) return 'darkgreen';
if (state < 70) return 'orange';
if (state < 75) return 'crimson';
return 'firebrick';
using in a native entities card displayes as:
while the button-card:
- type: custom:button-card
entity: sensor.cpu_temperature
color: auto
shows:
I realize the color: auto setting is for following light colors, but it would be really very nice to have it follow the color settings on other entities also?
Looks like this is a custom-ui config. I’m not going to support that, sorry. You can reproduce the same thing with button-card’s config.
custom-ui is not kept up to date anymore.
1 Like
General question on when to use the decluttering card v the custom button card for templates. I’ve just spent a lot of time rewriting my views to make extensive use of the custom button card templates. I have templates for binary sensors, sensors, and input booleans. There are then a few variants that add a variety of other things (custom fields, for example, to show additional info, last changed, etc.).
In this thread, it seems folks like the decluttering card as the template instead. Are there advantages that I’m missing in using the decluttering card template over the button card template? Just trying to create best practices
you said that about my templating request also 
now see where we are…your card is one of the most templated cards.
and yes, icon-color is done with custom-ui. It is still fully functional for this, and hope HA/Lovelace won’t take this out, no reason why that should happen is there?
Well, guess I have to respect your thoughts about supporting it, or not. It is too bad though because we can’t really do that with button-cards, can we.
We can template an individual card, but with the customize-glob and that one template we can set icons and icon-colors for many entities at once, without having to configure that anywhere else. And use them in the Lovelace setup without further settings, as I’ve shown in that entities card.
Would have hoped when native HA cards use these settings from custom-ui, custom cards could do so too.
Maybe you’ll have a look at it at a later time. Anyways, thanks for considering.
True, you can template all the things, but now we have to deal with a lot of support about writing javascript templates
In this case, it’s not up to me. custom_ui modifies the DOM on the fly, this would require a fix on custom_ui’s side, nothing that I’m willing to do since it’s not kept up to date.
haha, yes. you’re right. sorry. still glad I asked, and happier with the result you made us. 
could you phrase the fix needed for this, I could ask the author if he would be willing to do so.
If not, well just have to accept it I guess
Sorry, messed up this post and couldn’t re-set it…
this is what I now use for showing a picture on a button and a line of text right in the middle of it.
- type: custom:button-card
template: button_summary_picture
entity: sensor.next_alarm
hold_action:
action: navigate
navigation_path: /lovelace/tijd_agenda
label: >
[[[ if (entity.state !== 'Not set')
return states['sensor.next_alarm_day_only'].state;
return 'Relax';
]]]
entity_picture: >
[[[
if (entity.state !== 'Not set') return '/local/badges/alarm.png';
return '/local/badges/alarm_off.png';
]]]
custom_fields:
time: >
[[[ return entity.state ]]]
state:
- operator: template
value: >
[[[ return entity.state !== 'Not set' ]]]
styles:
card:
- background-color: '#e20000'
# - animation: blink 2s ease infinite
and template:
button_summary_picture:
size: 70%
show_state: false
show_label: true
show_name: false
show_entity_picture: true
aspect_ratio: 1/1
tap_action:
action: more-info
haptic: light
hold_action:
action: more-info
haptic: success
styles:
card:
- border-radius: 6px
- box-shadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'
- background-color: ivory
- color: grey
- font-family: Helvetica
grid:
- position: relative
custom_fields:
time:
- position: absolute
- left: 30%
- top: 30%
- font-size: 14px
- font-weight: bold
- color: black
As you can see this is using custom_field after all:
which seems alright (except for the moon eyes…)
need some explaining though why I cant just center a text (text-align: center), and in this case need left: 30%…
Hope there’s a css guru around willing to help me out there, because this seems not to work
Hi all,
I have a a lamp RGB and warm to coldwhite and it shows up as:
I use the --button-card-light-color
button_card_templates:
header:
styles:
icon:
- color: var(--button-card-light-color)
name:
- color: var(--button-card-light-color)
card:
- height: 55px
- font-size: 9px
This works great when the lamp is in RGB mode, but fails when in white-mode
The lamps turn gray, I think due to the rgb-values 255.255.255.
Is where a way to get around this “feature” 
Cheers,
Kees
It looks like there’s a problem with the buttons on the new iPad OS. When you press a button it acts like a double tap. So a light goes on and off again. It’s probably because Safari on the new iPad OS loads pages as desktop pages. When i manually switch to mobile mode (in Safari) the problem is gone.
This should have been fixed in a previous release so I suspect you are not using the latest version and/or you have a caching issue.
I’m using the latest version which i always pull via HACS. But i can double check when i’m home tonight.
I’ve just updated to IOS 13.1 and I can’t reproduce 
minute typo in the documentation under Action/service_data: description
If your service_data requires an entity_id, you can use the keyworD entity, this will actually call the service on the entity defined in the main configuration of this card. Useful for configuration templates
because of the link there to the configuration templates I have been looking but couldn’t find a refererence to that particular requirement. Ie, using the entity in the service_call in a template.
maybe add this in the examples:
tap_action:
action: call-service
service: script.toggle
service_data:
entity_id: entity
working great!
sorry if this seems to obvious…wasn’t for me when I looked for it
Do you mean IOS 13.1 or iPad OS 13.1 ? There is a significant difference between the 2.
iPadOS