I know @petro implemented something for this. Maybe you could just try to add a delay of 1 or 2 sec at the end of the script, it will stay on for that long in this case and you’ll have feedback.
However, by default on the button itself, when you hit it, there’s a ripple effect displayed.
I added a delay of 500 ms into a script and used service call to call the script.
Any chance, you can show some example of the delay you have added.
Thanks in advance.
Edit:
No need. That does the trick! Thanks a lot!
You guys rock!!!
how could I set a template for the styles: icon: - color, based on the state of another entity, or like below not the state but an attribute of the entity?
example using my motion sensors:
button_motion:
template: button_body
show_last_changed: true
tap_action:
action: more-info
haptic: light
hold_action:
action: more-info
haptic: success
styles:
card:
- box-shadow: 0px 0px 2px 1px
state:
- value: 'on'
styles:
card:
- color: red
name:
- color: black
icon:
- color: red
# id: on-icon
- value: 'off'
styles:
card:
- color: '#555B65'
- opacity: 0.8
icon:
- color: '#555B65'
with this, my current setup, they turn red when motion sensor state is ‘on’ and grey when not. I’d like them to show green, when in fact turned on (as in being switched on) and this would be the attribute on of that entity.
Should I simply add this as 2nd template under the state section…? First check to turn red on motion, second check green on entity.attributes.on being ‘true’ , third check grey when entity.attribute.on (default) being ‘off’?
like:
state:
- value: 'on'
styles:
card:
- color: red
name:
- color: black
icon:
- color: red
# id: on-icon
- operator: template
value: >
return entity.attributes.on === 'true'
styles:
icon:
- color: 'green'
- value: 'off'. # or operator default
styles:
card:
- color: '#555B65'
- opacity: 0.8
icon:
- color: '#555B65'
–update–
there’s no way I can get the entity.state, or entity.attributes.xxx to work i the operator section of state, see above…
@RomRider is this a bug? or should I do it differently …
NEW FEATURES
name or name_template
NOTE
There’s only one state matching at a time, you can’t combine them.
So you’ll have to have a state:
on and other entity is on
on and other entity is not on
off
Not completely grasp this yet, but please check my second state, the one with the operator for the entity.attributes.on
Even if I use only that, and have no other states defined, it simply won’t check its value to return color green either. Can’t we use entity.attributes.on like that?
fyi, this is the binary_sensor:
state === Off (clear), entity.attributes.on === ‘true’.
That’s probably a boolean and not a string.
entity.attributes.on === true (no quote around true)
yess! that was it. Staring in my face all along…
great and working immediately. 
thank you very much! this is the template:
button_motion:
template: button_body
show_last_changed: true
tap_action:
action: more-info
haptic: light
hold_action:
action: more-info
haptic: success
styles:
card:
- box-shadow: 0px 0px 2px 1px
state:
- value: 'on'
styles:
card:
- color: red
name:
- color: black
icon:
- color: red
- operator: template
value: >
var on = entity.attributes.on;
return on === true
styles:
icon:
- color: 'green'
- operator: default
styles:
card:
- color: '#555B65'
- opacity: 0.8
icon:
- color: '#555B65'
id: off-icon
working perfectly now.
To fix your issue with the misalignment when the text is too long:
Before:
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
After:
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content min-content
You define 4 lines in you grid-template-areas, but you where only defining a row height for 3 of them… It fixes the misalignment 
EDIT: actually it’s not 
, but still you shouldn’t omit a row
EDIT2:
You should add:
- text-align: start to all the fields and it will fix alignment issues.
Looks like when ellipsis is used, it doesn’t take into account the justify-self. But you still need to keep justify-self, because when it’s actually not “ellipsed”, it will use justify-self! CSS nightmare
@RomRider you are seriously missing most important feature. Buymeacoffee!! 
By far, your effort to this card is THE best custom component or plug-in for HA. This card has best documentation explaining every feature. It’s amazes me how calmly and tirelessly reply to all the questions in this thread. Man, you are a genius.
Thank you
yes!
you’re right on both accounts for justify-self and text-align. Added them and voila, nicely aligned in all situations!
thanks for your dedicated support, seriously appreciated.
Help please.
I keep getting this error showing. It only happens with button-card, happens randomly and usually (but not always) goes away if I refresh the page. It happens in Safari, Firefox, ios safari and the ios app. It first happened after I did a full cookies/history clear on Safari a few weeks ago, but it just keeps happening and is getting worse. Installed Firefox yesterday, and while the page worked once, it now shows the error every time.
Since then, I’ve tried deleting cookies again, deleting and reinstalling all custom cards, updating/downgrading cards. I’ve tried searching for a solution but seem to be missing something because most solutions just talk about clearing cache. Is there a way other than deleting cookies/website data?
Are you in Storage mode or Yaml? If the latter, could you post the code of one of your buttons and the resource declaration?
I edit Lovelace using the Configure UI button.
All buttons on all views are showing like this.
Resource declarations:
resources:
- type: module
url: /local/button-card.js?v=1.11.1
- type: js
url: /local/light-entity-card.js
- type: js
url: /local/vertical-stack-in-cards.js
- type: js
url: /local/slider-entity-row.js
- type: js
url: /local/card-tools.js
- type: js
url: /local/plugins/card-modder.js
- type: module
url: /local/radial-menu.js
- type: module
url: /local/mini-media-player-bundle.js
- type: module
url: /local/swipe-card/swipe-card.js
- type: module
url: /local/mini-graph-card-bundle.js
Code for one of the buttons is:
color: auto
entity: sensor.vacuum_status
icon: 'mdi:battery'
name: Status
show_state: true
state:
- color: 'rgb(91, 237, 54)'
icon: 'mdi:battery-charging'
value: Charging
- color: 'rgb(221, 232, 6)'
icon: 'mdi:move-resize'
value: Cleaning
- color: 'rgb(221, 232, 6)'
icon: 'mdi:keyboard-return'
value: Returning Home
- color: 'rgb(91, 237, 54)'
icon: 'mdi:dots-horizontal'
value: Idle
- color: 'rgb(91, 237, 54)'
icon: 'mdi:pause-circle'
value: Paused
styles:
label:
- font-size: 10px
tap_action:
action: more-info
type: 'custom:button-card'Try changing your resource type declaration from js to module.
resources:
- url: /local/button-card.js
type: module
He has it set as module… you’re misreading his resources.
Son of a… Why the hell is everything backwards?!
Welcome to the GUI editor lol… it and the raw editor mangle everything.
It really does. One day I’ll switch to yaml, but just can’t be bothered at the moment. Unless you think it’s likely to fix my current problem.