Yes, I also noticed z-index issues with browser_mod if you have sticky cards. The browser_mod popup now renders behind the sticky card, which breaks the entire popup since you can’t access parts of the UI.
Too many frontend changes forced me to revert back to 2023.4 for now. I hope they’re done with frontend changes like this for a long time. Ever since 2023.1 I’ve been faced with breaking changes after each update 
This is a tribute to mushroom cards 
I don’t use mushroom card myself, but if anything all z-index custom cards (so all card_mod styles that achieve this as well) are affected sadly.
Thank you. That’s exactly what I had found. Appreciate the response.
Have searched everywhere, but couldn’t find a solution for wrapping long text in the card by using card_mod, as it’s possible in other custom cards. Maybe one of the card_mod gurus can help?
In custom:button-card, the card-mod is not necessary in many cases, users may use “native” ways:
type: horizontal-stack
cards:
- type: custom:button-card
entity: sun.sun
show_name: true
name: some long name
show_state: true
show_label: true
label: some long label
- type: custom:button-card
entity: sun.sun
show_name: true
name: some long name
show_state: true
show_label: true
label: some long label
styles:
state:
- white-space: unset
name:
- white-space: unset
label:
- white-space: unset
- type: custom:button-card
entity: sun.sun
- type: custom:button-card
entity: sun.sun
- type: custom:button-card
entity: sun.sun
In answer to your question I have always used
"some very<br>long text"
But Ildars solution is far better. I have some changes to make!
Except that it now centre justifies the text. I liked being able to justify to the left.
Is that still possible?
styles:
state:
- white-space: unset
- text-align: right
name:
- white-space: unset
label:
- white-space: unset
- text-align: left
I was always using <br> , but this wasn’t solving my issue.
Do you mind sharing your code for your cards?
Hi Everyone,
For months I’ve been playing with the Button card towards a goal to have a card change color based on the temperature of a sensor with a gradient from one color to the next.
What I’ve come up with so far successfully changes the label, but the color of the card never changes away from white.
type: custom:button-card
entity: sensor.3fe_temp_humid_sensor_1bed_temperature
show_state: true
color_type: card
show_icon: false
show_label: true
aspect_ratio: 1/1
label: |
[[[
var temp = states['sensor.3fe_temp_humid_sensor_1bed_temperature'].state;
var low = 2;
var high = 112;
var hue = Math.trunc( (temp - low) * 240 / (high - low) );
return ` hsl(${hue}, 100%, 50%)`;
]]]
style:
card:
- color: |
[[[
var temp = states['sensor.3fe_temp_humid_sensor_1bed_temperature'].state;
var low = 2;
var high = 112;
var hue = Math.trunc( (temp - low) * 240 / (high - low) );
return `hsl(${hue}, 100%, 50%)`;
]]]
Here’s what I get:
I’ve also tried the code:
type: custom:button-card
entity: sensor.3fe_temp_humid_sensor_1bed_temperature
show_state: true
color_type: card
show_icon: false
show_label: true
aspect_ratio: 1/1
label: |
[[[
var temp = states['sensor.3fe_temp_humid_sensor_1bed_temperature'].state;
var low = 2;
var high = 112;
var red, green, blue;
if (temp <= low) {
red = 0;
green = 0;
blue = 255;
} else if (temp >= high) {
red = 255;
green = 0;
blue = 0;
} else {
var ratio = (temp - low) / (high - low);
red = Math.round(ratio * 255);
green = Math.round((1 - ratio) * 255);
blue = 0;
}
return `rgb(${red}, ${green}, ${blue})`;
]]]
style:
card:
- color: |
[[[
var temp = states['sensor.3fe_temp_humid_sensor_1bed_temperature'].state;
var low = 2;
var high = 112;
var red, green, blue;
if (temp <= low) {
red = 0;
green = 0;
blue = 255;
} else if (temp >= high) {
red = 255;
green = 0;
blue = 0;
} else {
var ratio = (temp - low) / (high - low);
red = Math.round(ratio * 255);
green = Math.round((1 - ratio) * 255);
blue = 0;
}
return `rgb(${red}, ${green}, ${blue})`;
]]]
This again returns the correct value in the label yet doesn’t change the color of the card.
I hope someone can correct me or set me on the right path.
Thanks in advance!
generic strategy for this card (any card really):
first try css properties with a fixed value first and see if you target the correct one…
that way you will be sure its not the card structure failing on you. especially when you say ‘months’ this would have been a good first step.
break down things to their simplest form and then start building
I really appreciate it. That was the fix!
Hi @Mariusthvdb Thanks for the example for a timer countdown. This seems to be one of the few solutions that updates the countdown every second. Just another question though: I don´t really like the way where the state is showing as ‘00:04 (paused)’. It just doesn’t fit in my custom button card layout. I would like to just see the remaining time, even when the timer is paused.
Do you perhaps know of a way to influence this?
Does anyone know why the icon in the custom field is not spinning in the center of the dot?
dot_active:
styles:
custom_fields:
dot:
- border-radius: "50%"
- position: "absolute"
- left: "25px"
- top: "-3px"
- height: "16px"
- width: "16px"
- border: "2px solid var(--card-background-color)"
- font-size: "12px"
- line-height: "14px"
- background-color: >
[[[
return "rgba(var(--color-green),1)";
]]]
extra_styles: |
[[[ return `
@keyframes spin {
0% {
transform: rotate(0deg) ;
}
100% {
transform: rotate(360deg) ;
}
}
`]]]
custom_fields:
dot: >
[[[
if (states[variables.ulm_active_sensor].state == 'on'){
return `<ha-icon icon="mdi:reload" style=" animation: spin 3s linear infinite; width: 12px; height: 12px; color: var(--primary-background-color);"></ha-icon>`
}
]]]
size: "21px"
Because you are rotating an element which has an icon net centrally aligned.
Give height, width, and line height same size and try a odd number, too.
Hi! I’m working on something similar for my dashboard but it seems that this only works on a page refresh. My first guess is that the event listener is not working. Is there something I could have missed?
After days of searching, this was my closest solution. With Home Assistant, it’s so hard to have a custom style that does not change on all devices 
But maybe there is another approach?
Thanks in advance for your help!
Edit: I have this error in the console but I’m not sure that this is related:
[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
I would like to create a button card showing the countdown of a timer. But I can´t get it to my liking. Can anyone help with formatting this? This is what I would like to accomplish:
So no ‘4 (paused)’, but the time in this format in all states (active, paused). And of course it should update every second, which makes it a little more challenging. Displaying the time in this desired format is where the challenge lies, the name & state I can manage.
This is my starting point:
card:
type: custom:button-card
template: button_timer
entity: timer.tester
aspect_ratio: 1/1
show_state: true
This yaml will display the time as either ‘4’ (when in active state) or ‘4 (paused)’. I would like to format that. I have tried a dozen different ways of using a state_display, trying to replace using a regex. But I can´t figure it out 