I strongly recommend the use. I think that the danger that it will stop being maintained is very low. At least one of the other users will take over the maintenance as this card has a lot of fans.
And start with button templates and variables from the beginning. It saves a lot of time and structures your configuration 
1 Like
beautiful this card, but how to change the color of the backlight? now it always comes out yellow
Hey,
do you want to define the color yourself? Or is it supposed to show the hue of the LED?
There are so many possibilities =)
type: custom:button-card
color_type: icon
entity: light.{{ENTITY}}
size: 55%
name: Light
state:
- value: 'on'
spin: false
color: yellow
icon: mdi:lightbulb
styles:
state: 'on'
card:
- box-shadow: 0px 0px 10px 1px cyan
icon:
- color: |
[[[
var [domain, object_id] = entity.entity_id.split('.');
if (domain === "light")
return 'var(--button-card-light-color)';
return '{{ color }}';
]]]
- operator: default
spin: false
color: grey
icon: mdi:lightbulb
1 Like
thank you, you opened a world for me 
1 Like
In addition to @MrThiemann, here is the whole code of my card:
type: custom:button-card
entity: light.hue_iris
custom_fields:
ring: |
[[[ if (entity.state == 'on' && entity.attributes.brightness) {
const brightness = Math.round(entity.attributes.brightness/2.55);
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}"
stroke="var(--button-card-light-color)" stroke-width="2" fill="none"
style="transform: rotate(-90deg); transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
stroke-dashoffset: ${circumference - brightness / 100 * circumference};" />
<text x="50%" y="54%" fill="var(--button-card-light-color)" font-size="16" font-weight= "bold"
text-anchor="middle" alignment-baseline="middle">
${brightness}<tspan font-size="10">%</tspan></text></svg>`;}
]]]
aspect_ratio: 1/1
color-type: icon
color: auto
styles:
card:
- border: none
- border-radius: 5px
- '--mdc-ripple-color': lightyellow
- '--mdc-ripple-press-opacity': 0.5
name:
- font-size: 0.8rem
- font-weight: 700
state:
- font-size: 0.7rem
label:
- font-size: 10px
custom_fields:
ring:
- position: absolute
- right: 5%
- top: 10%
- width: 30%
tap_action:
action: toggle
haptic: success
hold_action:
action: more-info
haptic: selection
show_last_changed: false
show_state: false
state:
- value: 'on'
styles:
card:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
- box-shadow: 0 0 0.95rem 0.2rem var(--button-card-light-color)
- transition: 2s ease
icon:
- filter: drop-shadow(0 0 0.75rem var(--button-card-light-color))
- transition: 2s ease
- position: relative
- left: '-1.5rem'
name:
- color: var(--button-card-light-color)
id: glow
show_label: true
label: |
[[[
if (entity.state == 'on' && entity.attributes.brightness)
return 'Helligkeit: ' + (Math.round(entity.attributes.brightness / 2.55)) + '%';
]]]
5 Likes
i love this custom button card! there are so many possibilities! Almost my entire dashboard is made of it!
I also think the custom_fields are really awesome! that opens new doors =)
After I had pretty much everything done, I got busy cleaning up my code and subpacking everything into templates and variables.
that makes it a lot clearer!
1 Like
wow thank you!!!
really!!
it works well:
can you perhaps help to adjust the code that he draws a circle without the math for brightness? i want to use it for my radiator too, but only with my temperature.
i get the temperature to work, but i dont know exactly change the code to draw a complete circle
okay i get it
Thank YOU AGAIN
3 Likes
can you explain me why you use more than one template?
i dont understand the usage?
save you in the template for example the values of the custom card not only the styles?
Hi,
I for myself use the button card by 90%.
I have different templates as well.
See the weather table in the center of that dashbord:
This template looks like this:
table_button:
layout: vertical
show_state: false
show_icon: false
show_label: true
show_name: false
show_units: false
styles:
card:
- height: 50px
label:
- font-size: 16px
tap_action:
action: null
I have another template for a music and number button but my major button looks like this:
button_card_templates:
standard_button:
size: 25px
show_icon: true
show_label: true
show_state: true
show_name: false
variables:
disconnected_entity: 'off'
custom_fields:
disconnected: |
[[[
if (variables.disconnected_entity == 'on') return `<ha-icon
icon="mdi:lan-disconnect"
style="width: 20px; height: 20px; color: red;"</ha-icon>`;
]]]
add_info: ' '
styles:
card:
- height: 65px
label:
- font-size: 12px
- position: absolute
- top: 70%
- left: 5%
state:
- font-size: 13px
- position: absolute
- right: 8%
- top: 40%
icon:
- position: absolute
- left: 5%
- top: '-25%'
custom_fields:
disconnected:
- height: 20px
- line-height: 20px
- min-width: 12px
- position: absolute
- right: 1%
- top: 60%
add_info:
- font-size: 11px
- font-weight: bold
- height: 13px
- position: absolute
- right: 3%
- top: 2%
I have a fixed space to show, if a device is broken or unavailable.
Due to the template, the button config is now quite simple:
entity: sensor.active_harmony_scene
template: standard_button
label: Media
icon: mdi:audio-video
show_state: true
variables:
disconnected_entity: |
[[[
if (states['binary_sensor.harmony_online'].state == 'on') return 'off';
else return 'on';
]]]
styles:
icon:
- color: |
[[[
if (entity.state == 'PowerOff') return 'var(--state-icon-color)';
else return 'var(--state-icon-active-color)';
]]]
tap_action:
action: navigate
navigation_path: /lovelace-details/5
type: custom:button-card
I simply have to define, which entity is the relevant to watch if connected or not and it will be shown as this:
2 Likes
@Jens_Wymeersch > I like your version! But my initial use of it failed. I am a little confused about the use. Can you give a custom-button code example for the button, one where you have all the variables and when you do not have one (like the power)?
Thanks.
i made me a file with the name : person_marc.yaml
and its saved under /config/popups/person_marc.yaml
but when i try to make a include in the custom:button-card the editor says its not allowed…
unknown tag !<!include:> (24:44)
- type: custom:button-card
tap_action:
!include: popups/person_marc.yaml
or
- type: custom:button-card
tap_action:
!include: /config/popups/person_marc.yaml
what is there wrong?
tap_action: !include ...
not
tap_action:
!include: ...
same error, the editor cant handle this?
tap_action: !include popups/person_marc.yaml
you can only include in yaml, not the UI.
Okay that’s the problem, okay than I wait until i am ready with all.
Thx
Hi. Does anybody know what i did wrong here.
- type: vertical-stack
cards:
- type: custom:button-card
variables:
currentview: >
[[[
return window.location.pathname.split('/').slice(-1);
]]]
name: >
[[[
return variables.currentview;
]]]
color_type: card
color: >
[[[
if (variables.currentview == 'home') {
return '#FFFFFF60';
} else
return '#FFFFFF10';
]]]
styles:
card:
- height: 3em
- border-radius: 15px
- align: center
- color: "#FFFFFF"
tap_action:
action: navigate
navigation_path: /lovelace/home
- type: custom:button-card
name: Licht
color_type: card
color: "#FFFFFF10"
styles:
card:
- height: 3em
- border-radius: 15px
- align: center
- color: "#9EA0A2"
- margin-top: 10px
tap_action:
action: navigate
navigation_path: /lovelace/lights
- type: custom:button-card
name: Klima
color_type: card
color: "#FFFFFF10"
styles:
card:
- height: 3em
- border-radius: 15px
- align: center
- color: "#9EA0A2"
- margin-top: 10px
tap_action:
action: navigate
navigation_path: /lovelace/climate
- type: custom:button-card
name: Media
color_type: card
color: "#FFFFFF10"
styles:
card:
- height: 3em
- border-radius: 15px
- align: center
- color: "#9EA0A2"
- margin-top: 10px
tap_action:
action: navigate
navigation_path: /lovelace/media
My plan is to highlight the current view in the navigation but the card color just doesn’t appear and i dont know why. As you can see at “name” the variable IS actually home.
hey @Nome200 , i would like to try this:
type: custom:button-card
variables:
currentview: |
[[[
return window.location.pathname.split('/').slice(-1);
]]]
name: |
[[[
return variables.currentview;
]]]
color_type: card
styles:
card:
- height: 3em
- border-radius: 15px
- align: center
#- color: '#FFFFFF'
- background-color: |
[[[
if (variables.currentview == 'neu4') {
return '#FFFFFF60';
} else
return '#FFFFFF10';
]]]
tap_action:
action: navigate
navigation_path: /lovelace/home
yeah okay it did work with the “- background-color” and not with the card coloring for whatever reason. Thanks for helping
Hey 
I would like to replace my entity in the if loop with “config.entity”. Unfortunately, it gives me an error… what am I doing wrong?
original:
type: custom:button-card
entity: binary_sensor.ty13600724840d8eae6714
icon: |
[[[
if (states['binary_sensor.ty13600724840d8eae6714'].state == 'on') return 'mdi:garage-open';
return 'mdi:garage';
]]]
name: Garage
show_icon: true
aspect_ratio: 1/1
hold_action:
action: more-info
tap_action:
action: toggle
show_state: true
template:
- kt_card_1
and this is what i try:
type: custom:button-card
entity: binary_sensor.ty13600724840d8eae6714
icon: |
[[[
if (states(config.entity) != 'on') return 'phu:panel-frontdoor-open';
return 'phu:panel-frontdoor-close';
]]]
name: Haustür
show_icon: true
aspect_ratio: 1/1
hold_action:
action: more-info
tap_action:
action: toggle
show_state: true
template:
- kt_card_1