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
Yes, just assign a timer entity to the card and add show_state: true
1 Like
Thank you, that worked for me! Previously I was using the entity assigned as an input select, so when I clicked my button I picked from my options. With the timer assigned, I now lose that. Is there a way to manually assign a click to still pull up the input select for this, instead of the timer? Thank you much for your time, Iâve been trying to get this figured out all evening!
Sure itâs possible!
Automatically selects the next option:
tap_action:
action: call-service
service: input_select.select_next
service_data:
entity_id: input_select.your_entity # replace with your input select here
Or if you wanted the more-info to show up instead
tap_action:
action: more-info
entity: input_select.your_entity # replace with your input select here
1 Like
Thank you so much! This is an incredible tool and I am very appreciative of the work you put in it!
2 Likes
Trying to get the same color as my lights when turned on.
And coloring a svg on the fly with the css var.
Makes sense ?
Hello. Iâm going crazy to understand how to use the grid.
I have the following card:
type: 'custom:button-card'
custom_fields:
temp_impostata: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width: 25px; height: 25px; color: black;">
</ha-icon><span>Temperatura impostata <span style="font-size: 30px;">${states['climate.riscaldamento_termosifoni'].attributes.temperature}°C</span></span>`
]]]
style:
grid-template-columns: 1fr 1fr 1fr
grid-template-rows: 1fr
I would like to have three columns where to put the icon, the name and the value as in the figure:
I studied the example on github a lot with the HassOS status but I canât understand how to use the grid. Can you help me?
Thanks (once again!) it works great now 
5 Likes
I created a square card with rounded corners and a glow along the edges. inside I would like to play the live streaming of a cam. With show_live_stream I see correctly but it is a rectangle in the card. I would like the card to be full and cut to size. I donât know if I made myself clear, but can someone show me the way? Thanks.
I donât know what your full configuration is, but this is the part which will display the camera stream in the background (Donât use show_live_stream: true nor show_entity_picture: true and replace .cameraView="live" with .cameraView="auto" if you want to have a new image every 10sec only)
show_live_stream: false
show_entity_picture: false
show_icon: false
styles:
name:
- z-index: 2
custom_fields:
camera_stream:
- position: absolute
- width: 100%
- height: 100%
- z-index: 0
custom_fields:
camera_stream: |
[[[
return html`
<hui-image
.hass=${hass}
.cameraImage=${entity.entity_id}
.entity=${entity.entity_id}
.cameraView="live"
aspectRatio="1"
></hui-image>
`;
]]]
1 Like
Did you read that section which explain how the grid works?
You are missing the most important parameter which is the value of grid-template-areas
I have read and reread it and have done dozens of tests, also comparing with the examples, but I canât understand how it works