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
If the icon, the name and the state are the only thing you want to display in the card, you donāt need a custom_field.
What are you trying to achieve globally? Is this section part of a more complex button?
I know this but I would like to understand how the grid works, starting from the example I have reported
What should I put in āgrid-template-areasā to get the result described above?
That would be the solution to what you want to achieve:
type: 'custom:button-card'
custom_fields:
temp_icon: |
<ha-icon
icon="mdi:thermometer"
style="width: 25px; height: 25px; color: black;">
</ha-icon>
temp_name: Temperatura impostata
temp_state: "[[[ return `${states['climate.riscaldamento_termosifoni'].attributes.temperature}Ā°C` ]]]"
styles:
grid:
- grid-template-columns: 30px 1fr 20% # 1st column takes 30 pixels, last column takes 20% of the width, middle column takes the remaining space
- grid-template-rows: 1fr # only 1 row
- grid-template-areas: '"temp_icon temp_name temp_state"' # 3 columns, the name of each column equals the name of the custom_field
custom_fields:
temp_state:
- font-size: 30px
Edit: typos in the code
1 Like
HI,
tooltip is magic, and I use it a lot. Only gripe I have is the time it takes to popup.
You have set it to be 1.5s which is really quite long for the Interface to provide feedback. Because of that I edited it (the button-card.js file) to use:
.tooltip:hover span.tooltiptext {
opacity: 1;
transition-delay: 0.5s;
}
which is still a bit slow, but much better 
edit or so it seemed, reloading makes it go slow againā¦
since we can we style the transition-delay like:
styles:
tooltip:
- color: var(--text-color-off)
- font-size: 10px
- background: var(--background-color-off)
- transition: opacity 0.5s
have a look, top menu shortcut bar is styled manually and almost instantaneous, the bigger buttons use only the button-card resource:
styling the first button:
could you set it to be configurable via a config option? would make the config just that bit cleaner and more robust? Or is the advised way to do just that.
Both above settings now use 0.5 sec, and the Styled options responds much swifter
thanks for considering!
Unfortunately it doesnāt work. This is the result:
Iāve edited the code, did you take the last one?
Yes. I have tried again now
Sorry, Iāve fixed it 