Custom Button Card - flash when condition is met

Configuration Frontend
1

Hi all. Im just getting started with home assistant and have installed the custom button card. I’m trying to get the button’s icon to change to red and start flashing when the switch is on for over one hour. But I cant seem to get it to work.
Here’s what I tried:

type: 'custom:button-card'
entity: switch.coffee_maker
name: Coffee Maker
icon: mdi:coffee
color_type: card
state:
  - value: 'on'
    operator: '>'
    options:
      hours: 1
    styles:
      icon:
        - color: red
        - animation: blink 2s ease infinite
  - value: 'on'
    operator: '<='
    options:
      hours: 1
    styles:
      icon:
        - color: orange
tap_action:
  action: toggle

Any help would be appreciated!

2

Disregard. Bing chat to the rescue…

This code is working:

type: custom:button-card
entity: switch.coffee_maker
name: Coffee Maker
show_state: true
state:
  - value: 'on'
    styles:
      icon:
        - color: orange
  - operator: template
    value: >
      [[[ return new Date().getTime() - new Date(entity.last_changed).getTime() > 3600000; ]]]
    styles:
      card:
        - animation: blink 2s ease infinite
        - color: red
styles:
  icon:
    - color: white
    - width: 40px
    - height: 40px
tap_action:
  action: toggle
hold_action:
  action: more-info
3

Hi @ryanjj509 unfortunately, your code does not work for me. Using your code or the following one:

type: custom:button-card
entity: binary_sensor.tuya_water_leak_sensor_n1_ad0_water_leak
state:
  - value: 'on'
    color: blue
    icon: mdi:dishwasher
  - operator: template
    color: blue
    icon: mdi:dishwasher
    value: >
      [[[ return new Date().getTime() - new Date(entity.last_changed).getTime() > 3600000; ]]]
    styles:
      card:
        - animation: blink 2s ease infinite
color: white
icon: mdi:dishwasher
color_type: card
name: Dishwasher - active 30s
tap_action:
  action: toggle
hold_action:
  action: more-info

When entity change from ‘on’ value, does not blink 1h neither 1ms. Looks like

value: >
      [[[ return new Date().getTime() - new Date(entity.last_changed).getTime() > 3600000; ]]]

is not right? Trying to resolve with Google Bard without success :frowning: please any consideration?

4

Hi All,
Perhaps anyone is able to help me out here.
I am using the blink option for a while now but somehow it stopped blinking.
Has there been any changes that you know of?

type: custom:button-card
color_type: card
entity: sensor.target_alert_temp_probe_1
show_state: true
show_name: false
size: 55%
state:
  - value: Unavailable
    color: royalblue
    icon: mdi:grill
  - value: Grill too Hot
    color: Red
    icon: mdi:grill
    styles:
      card:
        - animation: blink 2s ease infinite
  - value: Correct temp Range
    color: Green
    icon: mdi:grill
    styles:
      card:
        - animation: blink 2s ease infinite
  - operator: default
    color: white
    icon: mdi:grill
5

Having the same trouble. Did you figure this out?

6

I reached out to Dave from 3ATIVE VFX Studio on his discord. He was able to provide me with code to make the card blink after x seconds.

Here is a simple example. When light.office_lamps is on for 10 seconds, the card will start blinking.

type: custom:button-card
entity: light.office_lamps
state:
  - value: 'on'
    styles:
      card:
        - animation: blink 1.5s ease 10s infinite
7

Hi, I can get the card to flash and works well, I want to make the border of the card to flash.
Is this possible? and if so can you provide and example, please see my code below.

type: custom:button-card
entity: binary_sensor.office_motion_sensor_iaszone
name: Bedroom 2
icon: mdi:shield-check
tap_action:
action: more-info
show_state: false
styles:
card:
- background-color: rgb(173, 216, 230)
- filter: opacity(80%)
- height: 60px
- border-color: green
- border-width: 4px
icon:
- height: 25px
- color: black
name:
- font-size: 12px
- color: black
state:

  • value: ‘on’
    icon: mdi:motion-sensor
    styles:
    card:
    - height: 60px
    - border-color: red
    - border-width: 4px
    icon:
    - height: 25px
    - color: black
    name:
    - font-size: 11px
    - color: black
  • value: unavailable
    icon: mdi:exclamation-thick
    styles:
    card:
    - height: 60px
    - border-color: grey
    - border-width: 4px
    - animation: blink 1s ease infinite
    icon:
    - color: black
    name:
    - font-size: 11px
    - color: black
8
  1. Do not post an unformatted code, it is impossible to analyse. User use a “preformatted text” button or place your code manually into triple “`” (the symbol is located under ESC).
  2. This is custom-button-card related issue, so suggest to ask in the corr. thread.