Add timer to a button-card

I’ve been looking around for hours but i can’t find how to add a timer to a buttoncard.
I don’t understand how it’s possible that you can’t just showing the remaining time of a timer by using it’s entity (attributes) !! Using an entity card it shows the state, using an entities card it shows the remaining time.
WTH is that ??

Search is your friend.

create a template sensor

{% set time_remaining = state_attr('timer.auto_arm_time', 'finishes_at') %}
{{ iif( time_remaining != None,(as_timestamp( time_remaining ,0) - as_timestamp(now())) | int , 0) }}

show that sensor in your button card

Thx for your reply.
In the meanwhile i found an even much easier solution.

type: custom:button-card
entity: timer.keukenwekker
size: 50%
layout: icon_state
show_name: false
show_icon: true
icon: mdi:timer-cog
show_state: true
state_display: |
  [[[ if (entity.state == "idle") return 'Start Timer' ]]]
show_label: false
tap_action:
  action: call-service
  service: timer.start
  service_data:
    entity_id: timer.keukenwekker
styles:
  card:
    - height: 118px
    - icon: mdi:timer-cog
state:
  - value: idle
    styles:
      card:
        - font-size: 30px
        - font-weight: bold
        - icon: mdi:timer-cog
        - color: white
  - value: active
    styles:
      card:
        - font-size: 50px
        - font-weight: bold
        - icon: mdi:timer-cog
        - color: white
1 Like