Adding Animated Buttons in Home Assistant

Adding Animated Buttons in Home Assistant

In Home Assistant, buttons are typically used to turn devices on or off. I discovered a cool way to animate these buttons to make them more noticeable when a device is on. I think it helps make the dashboard a little nicer and can easily grab your attention to prevent leaving devices on unnecessarily, for example.

Animated Button Example

Here’s how the card looks in my dashboard:

To achieve this, you need the custom:button-card, which is a must-have for any Home Assistant setup because it adds a lot of customization options to the standard buttons.

Setting Up the Animated Button

Below is the configuration for my animated button card:

show_name: true
show_icon: true
type: custom:button-card
tap_action:
  action: toggle
entity: switch.switcher_touch_water_boiler_3
name: Water Boiler
show_state: true
size: 117px
extra_styles: |
  @keyframes bounce {
    0% { transform: scale3d(1, 1, 1); }
    7% { transform: scale3d(1.25, 0.75, 1); }
    10% { transform: scale3d(0.75, 1.25, 1); }
    12% { transform: scale3d(1.15, 0.85, 1); }
    16% { transform: scale3d(0.95, 1.05, 1); }
    19% { transform: scale3d(1.05, 0.95, 1); }
    25% { transform: scale3d(1, 1, 1); }
  }
state:
  - value: 'on'
    styles:
      icon:
        - animation:
            - bounce 5s infinite
        - color: '#00b59d'

How It Works

The button card is configured to show the name, icon, and state of the entity switch.switcher_touch_water_boiler_3. When the entity is turned on, the icon will animate with a bounce effect.

Keyframe Animation

The @keyframes bounce section defines the bounce animation. The animation property in the state section applies this animation to the icon when the device is on. The animation runs infinitely every 5 seconds.

Customization

You can modify the animation to suit your preferences. Change the animation type, duration, or even the color to fit your dashboard style.

Conclusion

This subtle but effective animation makes it easier to notice when a device is on, helping prevent leaving it on when not needed. If you find or create a cooler animation, I’d love to hear about it!


Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply