ok, please don’t feel pressed 
Would be cool if you could fix the ‘flickering’, otherwise we just have to be very precise when clicking.
about the coloring, @petro, didn’t you use some special config option to do in your buttons. Seem to recall a special click effect of sorts, but can’t your posts about that now…
I was just trying to show visual feedback after a script/button was pressed. Basically used a delay of 250 ms in the script as a hack. haven’t tried anything else yet.
ah ok, thanks for confirming.
Fear we have a lost case here then. First thing we can’t customize in the button card… !
Hello, everybody.
For the life of me I can’t figure out how to template this card.
Any help would be appreciated.
Maybe even also show me how I would list the unused lines in a love lace view.
Thanks in advance!
EDIT
I finally figured it out.
I’m not sure if there is a better way or not but even this saves ALOT of space.
thank You so much for this card and the work you put in it!!!
- id: 1 # Automatically created id
title: 1
path: one
theme: midnight-remake
cards:
- type: horizontal-stack
cards:
- type: "custom:button-card"
template: dimmer
entity: light.hue_go
name: Clock
entity_picture: /local/icon/kitchen_cabinet.PNG
- type: "custom:button-card"
template: boarder
- type: "custom:button-card"
template: dimmer
entity: light.hue_go
name: Clock
entity_picture: /local/icon/clock_on.PNG
Template:
button_card_templates:
dimmer:
show_entity_picture: true
aspect_ratio: 1/1.50
deep_press: true
color_type: icon_label
tap_action:
action: toggle
haptic: heavy
hold_action:
action: more-info
color: auto
show_last_changed: true
show_label: true
show_icon: true
show_entity_picture: true
custom_fields:
slider:
card:
type: custom:slider-entity-row
full_row: true
hide_state: true
hide_when_off: true
entity: '[[[ return entity.entity_id ]]]'
styles:
entity_picture:
- color: var(--button-card-light-color)
card:
- filter: opacity(50%)
- background-color: black
- box-shadow: 0px 0px 12px 2px rgb(255,9,9)
- color: rgb(255,255,255)
icon:
- height: 100%
- width: 100%
grid:
- grid-template-areas: '"i" "n" "s" "l" "slider"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content min-content
name:
- justify-self: center
- font-size: 20px
- font-weight: bold
- text-transform: Titlecase
label:
- font-size: 15px
- padding: 0px 10px
- justify-self: center
state:
- value: 'on'
styles:
card:
- box-shadow: 0px 0px 12px 2px var(--button-card-light-color)
icon:
- background-color: var(--button-card-light-color)
label:
- color: rgb(255,255,255)
- value: 'off'
styles:
card:
- background-color: black
- box-shadow: 0px 0px 12px 2px rgb(255,9,9)
- color: rgb(255,255,255)
- opacity: 3.0
- filter: grayscale(100%)
icon:
- value: 'unavailable'
styles:
card:
- background-color: rgb(0,0,0)
- color: rgb(0,0,0)
icon:
- color: rgb(0,0,0)
label:
- color: rgb(0,0,0)
state:
- color: rgb(0,0,0)
Hi, I would like to use this card to embed my gauge and dual gauge cards, this will give me much more control of the sizes etc as I am using this card for many other things on my UI. I tried to do this the same way as embedding a graph but I couldn’t get it working. Does anyone know if this is supported?
Managed to get this working thanks to @RomRider and @teachingbirds help.
I ended up putting the ‘state template’ in a label instead of a custom field which seems to work perfectly without using a layout grid.
Not sure if this is the most elegant way to achieve this but thought I would post the final code which can hopefully help someone else with similar requirements.
card:
type: custom:button-card
style: |
ha-card {
background: var(--button-background);
border-radius: 5px;
font-family: var(--font-family);
}
aspect_ratio: 1/1
lock:
enabled: true
unlock: hold
duration: 4
exemptions:
- username: User1
name: Front Door
show_state: false
show_label: true
icon: mdi:door-closed
size: 30%
styles:
card:
- padding: 10%
icon:
- margin-left: -30%
- margin-top: -15%
name:
- justify-self: start
- font-size: 15px
- font-weight: bold
label:
- justify-self: start
- font-size: 15px
entity: input_boolean.front_door
tap_action:
action: toggle
state:
- value: "on"
color: rgb(110,235,15)
- value: "off"
color: var(--button-off-color)
- value: "unavailable"
color: rgba(0,0,0,1)
label: >
[[[
if (states['input_boolean.front_door'].state == "on")
return "Unlocked";
return "Locked";
]]]
Yes that should be just fine! I used the “state” custom field because I have latest change displayed in the label section 
yes, that is the way to go. Might I offer another ‘solution’. Using the name field (see commented label field from before using last_changed):
- type: custom:button-card
template: button_motion
tap_action:
action: more-info
name: >
[[[
var fakestate = `<span style="color: red;font-size: 11px;word-wrap:break-word;"> ${entity.state.substr(0, entity.state.length-11)} </span>`;
return 'Last motion' + "<br>" + fakestate
]]]
entity: variable.last_motion
show_label: false
show_state: false
show_last_changed: true
show_name: true
# label_template: >
# return entity.state.substr(0, entity.state.length-11) +
# "<br>" + entity.last_changed
state:
- operator: default
styles:
card:
- color: grey
icon:
- color: red
Hi, very flexible card! Thank you.
May I ask a little help?
I have a momentary switch, and would like to change the icon and the color of the icon based an binary sensor state. (the button open-close a door, and there is a sensor about the door state, and would like to see the door state on the button card).
How can I do it?
Thank you
Something like:
entity: binary_sensor.door_state
show_state: true
show_icon: true
state:
- value: 'on'
icon: mdi:icon_for_on
color: 'red'
- value: 'off'
icon: mdi:icon_for_off
color: 'green'
Thank you, but when I click on the icon it should trigger the switch.
Well then add:
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.xxxxxx
Would you please post your fully custom button template with slider?
Thanks,
Not using the slider right now, but this has all options in it, either active, or commented out. If you want o change the times displayed on the button, change the grid-template-areas and styles accordingly:
button_light:
label: >
[[[
var bri = Math.round(entity.attributes.brightness / 2.55);
return (bri ? bri : '0') + '%';
]]]
color: auto-no-temperature
size: 30%
aspect_ratio: 1/1
# show_state: true
# show_label: true
tap_action:
action: toggle
haptic: light
# hold_action:
# action: more-info
# haptic: success
hold_action:
haptic: heavy
action: call-service
service: browser_mod.command
service_data:
command: popup
title: >
[[[ return entity.attributes.friendly_name ]]]
style:
position: fixed
z-index: 999
top: 0
left: 0
height: 100%
width: 100%
display: block
align-items: center
justify-content: center
background: rgba(0, 0, 0, 0.8)
color: 'var(--primary-color)'
flex-direction: column
margin: 0
"--iron-icon-fill-color": "#FFF"
card:
type: custom:light-popup-card
entity: >
[[[ return entity.entity_id ]]]
# icon: {{ icon }}
# scenesInARow: 2
brightnessWidth: 150px
brightnessHeight: 400px
switchWidth: 150px
switchHeight: 400px
# scenes:
# - scene: scene.morning_lights
# color: "#FDCA64"
# name: ontspannen
# - scene: scene.morning_lights
# color: "#FFE7C0"
# name: helder
# - scene: scene.morning_lights
# color: "#BBEEF3"
# - scene: scene.morning_lights
# color: "#8BCBDD"
deviceID:
- this
styles:
state_label:
- font-size: 11px
- font-family: Helvetica
- justify-self: start
- text-transform: capitalize
- font-weight: bold
card:
- background-color: 'var(--paper-card-background-color)'
- 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-overflow: unset
- white-space: unset
- word-break: break-word
- text-align: start
label:
- font-size: 11px
- font-family: Helvetica
- justify-self: start
- text-align: start
- padding-right: 45px # push to the state column
state:
- font-size: 11px
- font-family: Helvetica
- justify-self: start
- text-transform: capitalize
- font-weight: bold
grid:
- grid-template-areas: '"i" "n" "stateDisplay"' # '"i" "slider" "n" "stateDisplay"' #'"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- justify-content: start
- align-items: start
# custom_fields:
# slider:
# - filter: opacity(80%)
# - color: rgb(240, 194, 9)
# - padding-left: 0px
# custom_fields:
# slider:
# card:
# type: custom:slider-entity-row
# full_row: true
# hide_state: true
# entity: >
# [[[ return entity.entity_id ]]]
state:
# [[[ var bri = states['light.stue_finnsnes'].attributes.brightness;
# return 'hsl(' + bri + ',65%,50%)';
# ]]]
- value: 'on'
custom_fields:
stateDisplay: >
[[[ var fakestate = `<span style="color: #F0C209;"> ${entity.state}:</span>`;
var fakelabel = `<span style="color: #F0C209;"> ${Math.round(entity.attributes.brightness / 2.55)} %</span>`;
return fakestate +' ' + fakelabel;]]]
styles:
card:
- color: black #'#F0C209'
# name:
# - color: black
# label:
# - color: '#F0C209'
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:
# - opacity: 0.7
label:
- color: rgba(0, 0, 0, 0.0)
icon:
- color: grey
name:
- color: grey
state:
- color: grey
custom_fields:
stateDisplay:
- font-size: 11px
- font-family: Helvetica
- justify-self: start
- text-transform: capitalize
- font-weight: bold
- color: grey
id: off-icon
- value: 'unavailable'
custom_fields:
stateDisplay: >
[[[ return entity.state ]]]
styles:
card:
- opacity: 0.8
- color: '#D3D3D3'
icon:
- color: '#D3D3D3'
label:
- color: rgba(0, 0, 0, 0.0)
custom_fields:
stateDisplay:
- font-size: 11px
- font-family: Helvetica
- justify-self: start
- text-transform: capitalize
- font-weight: bold
- color: '#D3D3D3'
not this also has a popup card using browser-mode. You can easily take that out if you want eg a simple and native more-info. The code is all in this example. I should have taken out all label options here, since I don’t use that anylonger, but it doesn’t harm, so didn’t bother yet.
Can Button card be set up to directly show (without pressing the button) a live stream off an ONVIF camera?
Camera is setup as follows:
- platform: onvif
name: Gate
host: 10.0.1.211
profile: 0
username: !secret gbl_pl960_username
password: !secret gbl_pl960_password
port: 2000
button is setup as:
- type: "custom:button-card"
entity: camera.gate
name: Gate
show_entity_picture: "true"
styles:
card:
- height: 450px
- font-size: 14px
button displays just the still image, not stream
Can Button card be set up to directly show (without pressing the button) a live stream off an ONVIF camera?
Amazing work! It’s just awesome!
But I have a question, is it possible to add gradient to the button card background?
I’ve trying to do so but I’m a bit lost on that.
Thanks in advance
Currently not, but please open a feature request so that I add it to the next release
Yes, for example:
styles:
card:
- background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet)
Use this website to generate the gradient for example
Thanks man!!! That was exactly what I was looking for!
You are the man!
Is there a way to make it so that when button is pressed it makes a color to illustrate that its being press down.
I find that this could be usefull for some switches were i have Harmony activity switches and whant to show that ive acualy pressed the button so i know the activity is about to start before i klick again.
This is just one example of many were i have buttons that has a script on them that makes allot of stuff were it take abitt of time before it turns on and then gets a color.
I could not find a answer to this when i search so hope any of you might have a answer.
Only way to do this at the moment is by adding a delay to the script. This will give the script a momentary ‘on’ state which will make the button light up.
Otherwise this is something that @RomRider has not found a solution to yet.