It’s just weird to me that HA shows yellow icon when I set it to pure white, button card sets it to while. I dont know enough about theming, etc to know why the button card shows the “true” color and an HA entity card shows yellow. It’s not a big deal, just weird to me.
The --paper-item-icon-active-color is yellow, so HA uses it for a white light on. button-card uses its own color calculation model.
1 Like
You could template it with JS using the RGB value in the entity on the color field.
[[[ return (entity.attributes.rgb_color === [0, 0, 0]) ? 'var(--paper-item-icon-active-color)' : 'auto'; ]]]
EDIT: Might need to add logic for on/off. You’d also need to add a greyscale template to the icon when it’s on. It’s more work than it’s worth.
1 Like
Thank you and thanks as well to @KTibow. All makes sense and as you said, may not be worth the effort. One question, HA seems to me to always show the correct color, other than white. Is that the reason why the button card does its “own color calculation model”. I guess that would make sense. I guess white is a valid color, and HA does not display white, and if you have your theme set appropriately then it would show the actual color even if HA is showing it as “yellow”. Other than that scenario, I cannot think of another reason to use a different calculation model, right.
I believe the separate color calc model is because HA’s model is not accessible from a custom card.
1 Like
@petro’s approach is the best, the only thing is that color doesn’t support templates so in the meantime you’ll have to use states instead:
state:
- operator: template
value: >
[[[
if (entity.state === 'on' && entity.attributes.rgb_color) {
let rgb_sum = entity.attributes.rgb_color.reduce((a, b) => a + b, 0);
return rgb_sum > 3 * 230; // adjust the value to match when you want to switch to the default icon color
}
return false;
]]]
color: var(--paper-item-icon-active-color)
2 Likes
I’m 100% sure it’s me not fully understanding, but I’m not having any success. I’ve made the change like so
color: auto
color_type: icon
entity: light.left_shelf_lights
hold_action:
action: more-info
label: |
[[[
if (states['light.left_shelf_lights'].state == 'off') return "Off";
else return 'Brightness ' + (Math.round(states['light.left_shelf_lights'].attributes.brightness / 2.55)) + '%';
]]]
states:
- operator: template
value: >
[[[
if (entity.state === 'on' && entity.attributes.rgb_color) {
let rgb_sum = entity.attributes.rgb_color.reduce((a, b) => a + b, 0);
return rgb_sum > 3 * 230; // adjust the value to match when you want to switch to the default icon color
}
return false;
]]]
color: var(--paper-item-icon-active-color)
layout: icon_label
show_label: true
show_name: true
styles:
card:
- height: 100px
icon:
- align-self: flex-start
- height: 100%
- width: 100%
label:
- font-size: 12px
- justify-self: center
- text-overflow: unset
- white-space: unset
- word-break: break-word
name:
- font-size: 16px
- justify-self: center
- text-overflow: unset
- white-space: unset
- word-break: break-word
- font-weight: bold
type: 'custom:button-card'
No errors, but not change. I’ve tried chaning the value from 230 to 255, all the way to 1, and no change.
The attribute for my light - attributes.rgb_color returns (255,255,255), I admit I dont fully understand the .reduce part of the template above I “think” its just cutting (255,255,255) down to (255, 255)?? Honestly not fully following. haha. would you mind giving a brief description? Or maybe I put it wrong in the button code.
EDIT: Nevermind figured it out. Small typo
It’s
State: not States: 
Thank you so much for the assist! @RomRider
The answer is easier that you’d imagine. It’s summing the list together. (255, 255, 255) → 765.
1 Like
My bad, I typed this on my phone 
will update the original post
1 Like
thanks Romrider, good to know.
Since we have you here now, please have a look at Lovelace: Button card - #4524 by Mariusthvdb once more, I cant get tooltips to show up ( like I need it and think how to configure it (on an icon), either with or without extra styles)
Oddly enough I occasionally see a tooltip on a set buttons elsewhere in the config, but, these are not always there, and, not on all buttons, while they are all of the same button-card-template…
All in all, I could need your help as author of the card.
I’ll add tooltip as a feature, just forgot about it since it’s not in github 
1 Like
Cool!
please make that a templatable field…? that would be really magic.
Hi,
I was wondering if it is possible to highlight a button when clicked upon?
For example, I have several button cards that are used to navigate between different views, and I would like to highlight the selected button when the linked view / navigation path is shown.
I know how to style the button, but I don’t know how to apply the style after clicking on one. Also, to undo the applied style when clicking another navigation button.
Thanks!
You can use JS templates and window.location for that
Any link with more info on this?
Maybe a tutorial or something?
Thanks for pointing me in the right direction, though. Appreciate it!
@RomRider love your work 
many thanks for your time and dedication in creating this wonderful custom card. I was hoping that you could help me with this issue that I haven’t been able to solve.
font-size styling is not working for me when using custom fields in a grid that falls inside your vertical stack-in-card. Other styling works fine, e.g. border-radius, however font-size has no affect (see lines in code marked “font-size not working here”) As a result the font-size from body font in the default theme is used instead. Please find enclosed YAMP code and photo of the card.
cards:
- name: Display
show_icon: false
show_name: false
custom_fields:
line1:
card:
color: blue
color_type: card
entity: sensor.display_line_1
show_icon: false
show_name: true
show_state: true
type: 'custom:button-card'
line2:
card:
color: green
color_type: card
entity: sensor.display_line_2
show_icon: false
show_name: true
show_state: true
type: 'custom:button-card'
styles:
card:
- background-color: gold
custom_fields:
line1:
- width: 100%
- justify-self: center
# font-size not working here
- font-size: 20px
- border-radius: 30%
line2:
- width: 100%
- justify-self: center
# font-size not working here
- font-size: 20px
- border-radius: 30%
grid:
- grid-template-areas: '"line1" "line2"'
tap_action:
action: none
type: 'custom:button-card'
keep:
background: 'true'
border_radius: 'true'
box_shadow: 'true'
mode: vertical
type: 'custom:stack-in-card'
using this template:
button_shortcut_menu:
variables:
dashboard: >
[[[ return window.location.pathname.split('/')[1] ]]]
view: >
[[[ return window.location.pathname.split('/').slice(-1) ]]]
size: 25px
styles:
icon:
- color: var(--secondary-text-color)
card:
- box-shadow: none
- background: >
[[[ return variables.view == variables.path
? 'var(--secondary-background-color)' : 'var(--card-background-color)';
]]]
and this for a button:
- type: custom:button-card
template: button_shortcut_menu
icon: mdi:home
tap_action:
action: navigate
navigation_path: /lovelace/home
variables:
path: home
styles:
icon:
- color: >
[[[
return (states['sensor.count_alerts_notifying'].state > 0)
? 'red': 'green';
]]]
state:
- operator: template
value: >
[[[ return (states['sensor.count_alerts_notifying'].state > 0) ]]]
spin: true
to color the active view
1 Like
What is wrong here? “.state > 5 )” + "else return ‘Redo’ " Works fine but not ".state > 60 ) "
state:
- icon: 'mdi:coffee'
name: Starta Bryggaren<br><b><i>
value: 'off'
- icon: 'mdi:coffee'
name: |
[[[
if (states['sensor.fibaro_switch_power'].state > 5 ) return 'Värmeplatta på';
if (states['sensor.fibaro_switch_power'].state > 60 ) return 'Bryggning pågår';
else return 'Redo';
]]]
value: 'on'
You need to use “else if” for the second one. Please consider learning basic javascript before posting here.
Try full syntax.
[[[
if (states['sensor.fibaro_switch_power'].state > 60) {
return 'Bryggning';
} else if (states['sensor.fibaro_switch_power'].state > 5) {
return 'Värmeplatta på';
} else {
return 'Redo';
}
]]]
Had to move the statements, it was bigger than 5 and that was returned first without any other options.
1 Like