no sorry, but I guess you want the ‘remaining’ attribute to be displayed?
you can eg make the color change on state (grey for idle, orange for active), so you can see that in the icon, and then have the attribute show the remaining time, (when active only)
[[[ states['timer.scaldabagno'].attributes.remaining; ]]]
and
styles:
icon:
- color: >
[[[ return entity.state === 'active' ? 'orange' ; 'grey'; ]]]
Yes, I would like the remaining value, the countdown.
I’ve inserted the “attributes.remaining” code but that does not work.
I can’t see the digits of the timer remaining.
Why? 
I’ve try 2 solutions but they don’t work; here you are the 2 solutions tested:
[[[ states['timer.scaldabagno'].attributes.remaining; ]]]
[[[ return states['timer.scaldabagno'].attributes.remaining; ]]]
Actual code and below the screenshot of the result:
type: custom:button-card
aspect_ratio: 1/1
triggers_update: timer.scaldabagno
entity: input_boolean.scaldabagno_temporizzato
name: Scaldabagno Timer
icon: mdi:thermometer-plus
custom_fields:
notification: >
[[[ states['timer.scaldabagno'].attributes.remaining; ]]]
styles:
img_cell:
- justify-content: start
- align-items: start
- padding-left: 10px
- padding-bottom: 10px
custom_fields:
notification:
- border: 1px solid var(--text-color-on)
- border-radius: 12px
- font-size: 11px
- font-weight: bold
- height: 18px
- line-height: 18px
- min-width: 12px
- padding: 0px 3px
- position: absolute
- right: 5%
- top: 10%
About the color icon, for now, it’s best if I focus on one piece of code at a time
Thx
You forgot/ need return
That is only available when active?
I had already tried with return here:
But now I try again, and now work… but the time does not move… it’s always stable to 0:10:00.
you were right, seem not auto update, even if I update the page, always 10 minutes
The timer attribute is not updated, that’s not button cards fault. With GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any lovelace card you could try a workaround:
type: custom:button-card
custom_fields:
timer_time:
card:
type: entities
entities:
- entity: timer.testtimer
card_mod:
style:
.: |
ha-card {
box-shadow: none !important;
}
hui-timer-entity-row$hui-generic-entity-row$: |
:host {
justify-content: flex-end !important;
}
state-badge {
display: none !important;
}
.info {
display: none !important;
}
not sure why that mod would display the timer in action tbh…
all I can say if my entity is updated per second, it shows without issue.
and on a button too
this is all that is needed for that:
- type: custom:button-card
entity: sensor.second_updater
show_state: true
and with notification:
- type: custom:button-card
template: styles_cf_notification
entity: sensor.second_updater
show_state: true
custom_fields:
notification: >
[[[ return entity.state; ]]]
if the issue would lie with displaying a timer (sorry I dont have one to test, but will do so later on), you could maybe go around that more easily (than modding all sorts of unnecessary stuff) by creating a template sensor on the attribute of the timer and add it to the button like I just did here
edit
confessing I cant make it happen either using my proposed techniques, sorry bout that. As it stands the attributes isnt even updated in the state machine and a regular jinja template cant make that happen either.
its probably in internal timer and I do have a script somewhere using that, but have to find that…
btw start reading here Display remaining seconds of timer in frontend - #46 by 123 where all of this has been discussed, sorry I hadnt looked that up earlier
this works though:
{{10*60 - (now() - states.timer.tester.last_changed).total_seconds()|round()}}
to give you an idea to work with, showing the time left in seconds, so you would only need to format that to your liking (and make it use the timer setting, instead of my hard coded way now)
btw tis works fine:
- type: custom:button-card
entity: timer.tester
show_state: true
out of the box 
if I put this template the HA give me an error:
ButtonCardJSTemplateError: SyntaxError: Unexpected token ‘{’. Expected a property name. in ‘return {{10*60 - (now() - states.timer.scaldabagno.last_changed).total_seconds() | round() }};’
type: custom:button-card
aspect_ratio: 1/1
triggers_update: timer.scaldabagno
entity: input_boolean.scaldabagno_temporizzato
name: Scaldabagno Timer
icon: mdi:thermometer-plus
custom_fields:
notification: |
[[[ return {{10*60 - (now() - states.timer.scaldabagno.last_changed).total_seconds() | round() }}; ]]]
styles:
img_cell:
- justify-content: start
- align-items: start
- padding-left: 10px
- padding-bottom: 10px
custom_fields:
notification:
- border: 1px solid var(--text-color-on)
- border-radius: 12px
- font-size: 11px
- font-weight: bold
- height: 18px
- line-height: 18px
- min-width: 12px
- padding: 0px 3px
- position: absolute
- right: 5%
- top: 10%
What is my error?
Hi,
I am trying to use the button card to display the state of another entity and change the style. Currently I have it like this:
- type: custom:button-card
entity: light.living_area_lights #hue_group
name: Living Area
show_state: false
styles:
top: 20%;
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: light.office_light
state:
- entity_id: light.office_light
value: 'on'
styles:
card:
- background-color: '#f0c209'
- entity_id: light.office_light
value: 'off'
styles:
card:
- background-color: '#fffff'
template:
- light
- icon_hue
I have the entity on living area lights so I use the popup for hold_action to manage hue lights. But with the tap I am toggling the office light via KNX.
The problem is that I would like to display the state of the office_light and also change the background on the card. With my code the background is always #f0c209, no matter if office_light is on or off.
Help please 
This is a Jinja template and can not be used in the button card …
You should really read up on the difference.
It could be a template sensor though.
However, as I have displayed the last button, you should really do that. The master (Romrider) suggest that as way to go for templates, easy as can be.
If must you can embed it in another card and position it to the spot you want
state:
- operator: template
value: |
[[[ return states['light. office_light'].state == 'on' ]]]
styles:
card:
- background: red
- operator: template
value: |
[[[ return states['light. office_light'].state == 'off' ]]]
styles:
card:
- background: green
embed timer card as notification:
- type: custom:button-card
template: styles_cf_notification
entity: sensor.second_updater
aspect_ratio: 1/1
show_state: true
custom_fields:
notification:
card:
type: custom:button-card
styles:
card:
- box-shadow: none
- font-size: 11px
- font-weight: bold
entity: timer.tester
show_state: true
show_name: false
show_icon: false
tap_action:
action: toggle
entity_id: input_boolean.tester
needs some more formatting, but hey, this is what you were looking for?
Yeah, I’ve created a template named sensor.sensore_timer_scaldabagno (it work)
If I put it on my button_card code the custom_field become [object] as you can see below:
type: custom:button-card
aspect_ratio: 1/1
triggers_update: timer.scaldabagno
entity: input_boolean.scaldabagno_temporizzato
name: Scaldabagno Timer
icon: mdi:thermometer-plus
custom_fields:
notification: |
[[[ return states ['sensor.sensore_timer_scaldabagno'] ]]]
styles:
img_cell:
- justify-content: start
- align-items: start
- padding-left: 10px
- padding-bottom: 10px
custom_fields:
notification:
- border: 1px solid var(--text-color-on)
- border-radius: 12px
- font-size: 11px
- font-weight: bold
- height: 18px
- line-height: 18px
- min-width: 12px
- padding: 0px 3px
- position: absolute
- right: 5%
- top: 10%
from now, if you change code, please only post the changed code ? unless you got a complete new config ofc… btw, your error here is you’re missing the .state in the template.
Anyways, as I posted above, you should embed the button-card with entity timer in your other button-card. Dixit button-card Author/Magician
this is a bit more fledged out, with adequate services:
- type: custom:button-card
template: styles_cf_notification
entity: timer.tester
aspect_ratio: 1/1
show_state: true
# use a state_display, because otherwise 'show_state: true' will show the remaining time as state ;-)
state_display: >
[[[ return entity.state; ]]]
custom_fields:
notification:
card:
type: custom:button-card
styles:
card:
- box-shadow: none
- font-size: 11px
- font-weight: bold
entity: timer.tester
show_state: true
show_name: false
show_icon: false
tap_action:
action: call-service
service: >
[[[ return entity.state === 'active' ? 'timer.pause' : 'timer.start'; ]]]
service_data:
entity_id: timer.tester
hold_action:
action: call-service
service: >
[[[ return entity.state === 'active' ? 'timer.cancel' : 'timer.pause'; ]]]
service_data:
entity_id: timer.tester
thank you @Marcoletto for TIL …
why… just put the second_updater in triggers update and have the timer as the main entity.
that is not even needed. button-card shows the timers remaining seconds as is.
- type: custom:button-card
entity: timer.tester
show_state: true
suffices for that. But, above was asked to have that show in a notification field. At first I hadnt realized timer entity uses the internal clocking and can not be shown by its attribute.
Embedding a button-card makes it all happen, no secondary helpers needed.
but in this case the entity of the button is the timer, not other entities.
Timer in the button and timer in the right top corner
Yes, what ever you want. I just made this quickly to show some action possibilities too and display what state shows why
Ah ok… but if you try to put another entity for the button, you will see that the timer will not visible
Sorry but that must be a config mistake. The button card embed is using its own entity, so you can use any thing on the main button. Or nothing for that matter
been meaning to ask for sometime but forgot:
Chrome seems to behave differently from Safari in many ways, and this is a bad one…
using a (decluttering) card config like:
- type: custom:button-card
confirmation:
text: >
Open cover at 'My' position?
entity: '[[command]]_my'
Safari nicely shows:
but Chrome reveals the entire server path and port (mydomain.duckdns:port):
Is there anything we can do as user to hide that/make it show like Safari? If not would this warrant an issue in the repo…?So you can fix it resource side?
