How to change button color for starting an automation

Configuration Frontend
1

Hey!
First of all, Sorry for my English.
I have a problem, maybe someone can help me.
I have a scene from an ir remote, an Input select, an automation and a Button-Card to start the scene by tap action. This is working fine.
But I want that the color of the icon changes when I press the Button and the scene is activated, like light buttons.
Thank you in advance for helping.

1 Like
2

I use the custom:button-card for that. Example from my LoveLace:

type: 'custom:button-card'
entity: input_select.livingroom_mode
name: Movie
icon: 'mdi:video-vintage'
color: var(--state-icon-color)
styles:
  card:
    - height: 110px
state:
  - value: Movie
    color: var(--state-icon-active-color)
tap_action:
  action: call-service
  service: script.livingroom_toggle_mode
  service_data:
    mode: Movie
3

This is my config:

type: ‘custom:button-card’
name: Klima Vegas
entity: input_boolean.klima_vegas
icon: ‘mdi:paw’
color: var(–state-icon-color)
tap_action:
action: call-service
service: automation.trigger
service_data:
entity_id: automation.klima_vegas
state:

  • value: input_boolean.klima_vegas
    color: var(–state-icon-active-color)
4

I have the same question. When I push my button to open my garage, the color change of the icon doesn’t happen until a few seconds after the garage is opened. How can I get the button to change color when I touch it to confirm the command went through. I find myself hitting the button multiple times to make sure the command was registered.

5

I figured it out. You have to add the following “ripple” lines:

type: 'custom:button-card'
styles:
  card:
    - --mdc-ripple-color: red
    - --mdc-ripple-press-opacity: 0.5
    - height: 240px
    - font-size: 16px
6

thanks!!, works for me too.