That’s it now it is working
Thanks both of you.
I’ve been playing with the custom button card recently and have a question. I have a receiver controlled by a harmony hub that goes into bluetooth pairing mode when the bluetooth source button is held down for a few seconds. I’d like to be able to trigger this behavior from the button card, but am unsure what action might have this tap and hold effect. I tried to use the call service and repeat actions under the hold action unsuccessfully. Any guidance would be appreciated!
It doesn’t work like that unfortunately. Unless there’s a direct command you can send to trigger the paring mode from the harmony remote (without even involving home assistant), it won’t be possible. Nothing to do with button-card.
Wrong thread - sorry!
Hi everyone!
Do you know what I have to do to have my dark sky weather card show decimals with current temperature? I am using xiaomi sensor for that data and it does support decimals but card doesn’t.
Thank you
How is the darksky weather card related to button-card? Wrong thread?
I’ve built a new card for you crazy graphing folks out there 
https://community.home-assistant.io/t/apexcharts-card-a-highly-customizable-graph-card/
Give it a go and let me know what you think
6 Likes
Doh! Yes, sorry!
Thanks for the reply, RomRider. I was hoping it might be possible as I’m able to get pairing mode to activate remotely by pressing and holding the bluetooth button in the harmony app. Is it that button card doesn’t distinguish between button down and button release states?
I don’t think there’s a direct ‘one tap’ command that can be sent from harmony remote to trigger pairing mode, but I’ll poke around a bit and see if something surfaces.
I’m working on a new button that has multiple icons inside it. I want to show a vertical-stack containing 4 button cards, at the right side of the main button card. But for the life of me I cannot change the size of the vertical-stack inside the button-card. Is there a way to change what the dimensions are of the vertical-stack inside the main button card, so all the button-cards inside the vertical-stack are nice and small?
Any advice?
Please share your code, hard to say like that
1 Like
My code is kind of a mess right now since I’m experimenting, but here it is for now:
- deep_press: true
hold_action:
action: more-info
haptic: heavy
icon: 'mdi:sofa'
name: Woonkamer
aspect_ratio: 1/1
show_icon: true
show_label: true
show_name: true
size: 30%
label: |
[[[
return states['climate.woonkamer_radiator'].attributes.local_temperature + '°C';
]]]
custom_fields:
status:
card:
type: vertical-stack
cards:
- entity: cover.woonkamer_gordijnen
show_name: false
show_label: false
show_icon: true
state:
- styles:
icon:
- filter: opacity(30%)
- color: '#000000'
icon: 'mdi:blinds'
value: 'closed'
- styles:
icon:
- color: 'var(--switch-accent-color)'
icon: 'mdi:blinds-open'
value: 'open'
styles:
card:
- background: none
tap_action: none
hold_action: none
type: 'custom:button-card'
- entity: cover.woonkamer_gordijnen
show_name: false
show_label: false
show_icon: true
state:
- styles:
icon:
- filter: opacity(30%)
- color: '#000000'
icon: 'mdi:blinds'
value: 'closed'
- styles:
icon:
- color: 'var(--switch-accent-color)'
icon: 'mdi:blinds-open'
value: 'open'
styles:
card:
- background: none
tap_action: none
hold_action: none
type: 'custom:button-card'
- entity: cover.woonkamer_gordijnen
show_name: false
show_label: false
show_icon: true
state:
- styles:
icon:
- filter: opacity(30%)
- color: '#000000'
icon: 'mdi:blinds'
value: 'closed'
- styles:
icon:
- color: 'var(--switch-accent-color)'
icon: 'mdi:blinds-open'
value: 'open'
styles:
card:
- background: none
tap_action: none
hold_action: none
type: 'custom:button-card'
- entity: cover.woonkamer_gordijnen
show_name: false
show_label: false
show_icon: true
state:
- styles:
icon:
- filter: opacity(30%)
- color: '#000000'
icon: 'mdi:blinds'
value: 'closed'
- styles:
icon:
- color: 'var(--switch-accent-color)'
icon: 'mdi:blinds-open'
value: 'open'
styles:
card:
- background: none
tap_action: none
hold_action: none
type: 'custom:button-card'
styles:
card:
- background-color: var(--card-background-off)
- font-size: 12px
custom_fields:
status:
- overflow: visible
- position: absolute
- right: 15px
- top: 10px
- justify-self: start
- align-self: start
- align-items: start
- align-content: start
- text-align: start
- height: 30px
grid:
- grid-template-areas: '"i" "n" "l'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: start
- text-align: start
- position: absolute
- bottom: 5px
name:
- padding-bottom: 5px
- font-weight: bold
tap_action:
action: navigate
navigation_path: /smartphone-ui/kamer-woonkamer
haptic: medium
type: 'custom:button-card'
The thing I’m trying to create is the custom field: status part (where I used a vertical-stack with 4 button cards inside it).
Edit: The screenshot below shows the new card at the left and the old version on the right. Basically I want to re-create the right card, but using a 4 button cards inside a vertical-stack.
Hey I try to uses this card but the name will not disappear.
type: "custom:button-card"
entity: light.deckenlicht
icon: mdi:sofa
color: auto
action: more_info
The configuration is not correct, this is the very very very old one. Please have a look at the documentation
Crate thank you. The right doku helpes
HI Rom!
must confess clicking that link brought me to the ripple-color for the first time… 
and immediately makes me need it !
using this on entities with an on/off state works perfectly:
styles:
card:
- --mdc-ripple-color: >
[[[ return (entity.state == 'on')
? 'var(--background-color-off)' : 'var(--background-color-on)'; ]]]
Seems to be the easiest way to ‘auto-contrast’ the ripple, and do so in style of the current color scheme.
however, using that on a button which is set to service a script (and doesnt have an entity) doesn’t work at all of course. Made me wonder if I could use the ‘this’ and then eg this.background-color to have it oppose that (since I have background-color active on all of my buttons, that would be easiest:
styles:
card:
- --mdc-ripple-color: >
[[[ return (this.background-color == var(--background-color-on))
? 'var(--background-color-off)' : 'var(--background-color-on)'; ]]]
maybe? Since you warn us not to ‘mess with that’ I thought it better to ask first 
thanks!
Hi. First of all, flipping great addition to Home Assistant.
I am struggling a bit. Certainly something i changed, but for the life of me, i cant figure out want i am doing wrong.
I am struggling a bit with the --button-card-light-color-no-temperature
I have it on two different entity types, which previously acted the same way.
The light entity which get the correct color.
The switch entity which seems to get the color from paper-item-icon-active-color
Any insights?
What you are missing is the width of the styles.custom_fields.status.
By default, the vertical stack takes 100% of the width of the container and the container in your case takes the full width of the card. So adding: width: 10% or whatever else in the styles.custom_fields.status should fix your issue 
this is the button-card element in the DOM. It doesn’t have any background-color.
What you could try is this.shadowRoot.getElementById("card").style.background === 'var(--background-color-on)'
A switch has no color, so the behaviour is undefined
What are you trying to achieve?
Then maybe like this…
styles:
card:
- --mdc-ripple-color: >
[[[
let elt = this.shadowRoot;
elt = elt && elt.getElementById("card");
if (elt) {
return elt.style.background === 'var(--background-color-on)' ? 'var(--background-color-off)' : 'var(--background-color-on)';
}
return null;
]]]
1 Like
Hello all,
I was wondering if it is possible to show the current timer duration remaining, similar to when the timer is added to a standard entity card? I have found different posts around the forum giving different recommendations, but they are all from 2019 and do not seem to work for me.
Thank you,
-Curtis