Documentation: Flashing Buttons

[bighippo999]

First I'll apologise if this is in the wrong place. It's not an issue but I just figured out how to make my buttons flash and thought others may appreciate knowing how (who doesn't like flashing buttons :D) and when I ultimately lose the code, I'll be able to find how to do it again if it's in the docs.

Background: In my setup I have input_boolean helpers for each room. If the helper is on, the lights turn on when there's motion in the room. Because I don't want the lights to be turning on and off quickly all the time, I also have timer helpers which start a countdown when the motion ends to give a delay before turning the light off incase there's more motion.

I didn't want to clutter the lcars display with lots of countdowns, I thought flashing the auto button if the timer is active would be a good indicator something is happening.

Here's the code:

            ha-card {
              {% if is_state('input_boolean.kitchen_light_automation_helper', 'on') %}
                background-color: #44dd44;
                color: black;  /* or any other logic for text color */
                {% if is_state('timer.kitchen_light_timer', 'active') %}
                  animation: blinker 1s linear infinite;
                {% endif %}
              {% else %}
                background-color: #dd4444;
                color: black;
              {% endif %}
            }
            @keyframes blinker {
              50% {
                opacity: 0.6;
              }
            } 

I can't really show it without making a gif, but hopefully this gives an idea that the 'Living Room Auto' button is in the middle of flashing:

It works far better than I expected. I thought it may only work when the page is reload and just keep flashing until next reload, but they will happily start & stop flashing as soon as the related timer changes to active without reloading.

I'm not very good with css, but from what I can tell it should also be possible to make a lot of visual changes dependant on any entities states. I've just tried setting the background-color to #dd44dd instead of the opacity and it's happily turning from green to a purplish colour :)

Hope someone finds this helpful and it can be add to the docs. Lastly a huge thanks for creating the lcars theme. it's made my interface look great.