Share your config so that we can have a look. And no you don’t need anything else, just this button.
Hi,
we already discussed the
option for the name field, which as you can see would really be a good thing:
I was wondering if it could somehow be automized. In the label_template we can add +
+ to the output, and have it display the second line always.
But depending on the width of the button, it would not have to be always breaking the line:
Would be cool if that could be done.
the buttons above show something else: the left padding isn’t always correct, and it depends on the cropping if the button. As you can see that only happens with the name field. State,label and icon are always correct.
It seems to only happen with truncated names:
my config is:
button_body:
color: auto
size: 30%
aspect_ratio: 1/1
show_state: true
show_label: true
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: success
styles:
lock:
- color: red
card:
- border-radius: 12px
- background-color: ivory
- padding-left: 5px
name:
- justify-self: start
# - padding-left: 3px
- font-weight: bold
- font-family: Helvetica
- font-size: 13px
label:
# - color: gray
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
# - padding-left: 3px
state:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
# - padding-left: 3px
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- justify-content: start
- align-items: start
state:
- value: 'on'
styles:
card:
- box-shadow: 0px 0px 1px 1px var(--paper-item-icon-active-color)
name:
- color: black
state:
- color: gray
label:
- color: red
id: on-icon
- value: 'off'
styles:
card:
- opacity: 0.6
label:
- color: rgba(0, 0, 0, 0.0)
icon:
- color: black
name:
- color: black
state:
- color: black
id: off-icon
- value: 'unavailable'
styles:
card:
- opacity: 0.4
- color: grey
- --paper-item-icon-color: grey
label:
- color: rgba(0, 0, 0, 0.0)
please allow another detail question…
I like the small boder turning the color of the light in the ‘on’ state, and therefor use:
state:
- value: 'on'
styles:
card:
- box-shadow: 0px 0px 1px 1px var(--paper-item-icon-active-color)
this show very nice, but unfortunately takes out the 3d effect of the button (ie the shadow at the bottom and right side (and to a lesser extent the left side?))
can I bring that back with yet another css option?
I’ve tried it with:
card:
- border-radius: 12px
- background-color: ivory
- padding-left: 5px
- border: 1px outset
which shows:
which is a bit better, but the shadow is too clearly visible…
thanks for having a look how this should be improved.
For example:
- styles:
card:
- box-shadow: 0px 0px 20px 3px var(--button-card-light-color)
- background-color: 'rgba(57,128,228,0.2)'
value: 'on'
- styles:
card:
- background-color: 'rgba(0,0,0,0.6)'
value: 'off'that was a bit much for me… 
- value: 'on'
styles:
card:
- box-shadow: 1px 1px 1px 1px var(--paper-item-icon-active-color)
shows as:
which comes near, but still a bit unsubtle maybe.
hello you would be kind to publish the code of the fan that turns, I succeeded in part that is I can not bring the text to the right and the fan on the left all remains in the center and overlapped …
trying to order my buttons like we could before with a card (now each button is a card…) I tried this, and made a non-clickable button, which I’d like to re-use for all sets of buttons throughout the configuration.
Probably feel it coming, but the question is, can we create a template like this for a set of stacks, and have eg only the name and colors set in the actual config?
- type: horizontal-stack
cards:
- type: custom:button-card
template: horizontal-filler
- type: 'custom:button-card'
name: Set Switches
aspect_ratio: 16/1
styles:
card:
- color: '#F0C209'
- border-radius: 12px
- border: solid 2px
- border-color: '#555B65'
- font-size: 20px
- font-weight: bold
- type: custom:button-card
template: horizontal-filler
- type: horizontal-stack
cards:
- type: custom:button-card
template: vertical-filler
looks like:
still have to play around with the optimal color settings and in the end want to have them inherit the theme colors probably.
1 Like
there’s no such thing as coincidence… thanks Ill have a thorough look.
could I bother you with stupid little css issue?
trying to set a border-color with a hex color doesn’t work:
- operator: default
color: '#555B65'
styles:
card:
- box-shadow: 0px 0px 2px 1px '#F0C209'
have to use either the color name (doesn’t exist I think in this case) or the rgb-value:
- operator: default
color: '#555B65'
styles:
card:
- box-shadow: 0px 0px 2px 1px rgb(240, 194, 9)
is there a way to use the # values? wasn’t able to find that in my first searches…
Quote at the beginning
- box-shadow: '0px 0px 2px 1px #F0C209'
1 Like
I am truly embarrassed…
So sorry.
I don’t know if this has already been asked, but is there any way to have more buttons inside one card?
Something like this:
a button is a card… so the answer is no, afaik.
you can however create groups of cards and join these in a ‘grid’ using hor. and vert. stacks
_edit
completely missed that one, my bad. great idea…though a bit confused how to do that…all my horizontal and vertical stacks overlap.
HI,
building another set of buttons,
please let me ask this:
-
header button: when no entity is given this button show as posted. However when I configure an entity there, in this case the group.all_ceiling_spots, the name shifts outside the button… Since I want to show Name and label later on I have not disabled these. Cant this be done?
-
button borders shift with color temperature: though I have set auto-no-temperature, the border does shift with temp, making it invisible when close to the button color temp. using:
styles:
card:
- box-shadow: 0px 0px 2px 1px var(--button-card-light-color)
is there a way to prevent that?
icon_name and name_icon: Id would really love to mirror the left /right buttons. Left hand side show icon_name, right hand side name_icon. Is this already possible, if not, would you consider creating that option?
template:
button_spots_group:
color: auto-no-temperature
size: 30%
aspect_ratio: 4/1
show_state: false
show_label: false
layout: icon_name
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: success
styles:
icon:
card:
- border-radius: 12px
- background-color: ivory
name:
- font-weight: bold
- font-family: Helvetica
- font-size: 13px
label:
- color: gray
- font-size: 11px
- font-family: Helvetica
state:
- font-size: 11px
- font-family: Helvetica
- text-transform: capitalize
- font-weight: bold
state:
- value: 'on'
color: '#555B65'
styles:
card:
- box-shadow: 0px 0px 2px 1px var(--button-card-light-color)
icon:
- color: '#F0C209'
name:
- color: '#F0C209'
id: on-icon
- value: 'off'
color: '#F0C209'
styles:
card:
- box-shadow: '0px 0px 2px 1px #555B65'
icon:
- color: '#555B65'
name:
- color: '#555B65'
id: off-icon
- value: 'unavailable'
styles:
card:
- opacity: 0.4
- color: grey
- --paper-item-icon-color: grey
and config:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
template: horizontal-filler
- type: 'custom:button-card'
name: Ceiling spots
# entity: group.all_living_ceiling_spots
aspect_ratio: 16/1
# layout: icon_name
styles:
card:
- color: '#F0C209'
- border-radius: 12px
- border: solid 1px
- background-color: '#555B65'
- font-size: 20px
- font-weight: bold
- type: custom:button-card
template: horizontal-filler
- type: horizontal-stack
cards:
- type: custom:button-card
template: vertical-filler
- type: horizontal-stack
cards:
- type: custom:button-card
template: horizontal-filler
- type: custom:button-card
template: button_spots_group
entity: light.living_ceiling_1_cds
name: Cd's
icon: mdi:grid
- type: custom:button-card
template: button_spots_group
entity: light.living_ceiling_3_wall
name: Wall
icon: mdi:theater
- type: custom:button-card
template: horizontal-filler
- type: horizontal-stack
cards:
- type: custom:button-card
template: horizontal-filler
- type: custom:button-card
template: button_spots_group
entity: light.living_ceiling_2_terrace
name: Terrace
icon: mdi:nature
- type: custom:button-card
template: button_spots_group
entity: light.living_ceiling_4_sofa
name: Sofa
icon: mdi:sofa
- type: custom:button-card
template: horizontal-filler
thanks!
What is “this” in your question?
Nope, not yet possible, I’ll include that in the next release
(Almost) Everything is possible with CSS: see here, go a bit down to the examples and there is one example where you have the icon on the other side.
Haha, sorry. This: display Name (when configured with an entity) in the middle of the button, like now, without the entity…
I had spotted that, and tried:
- type: custom:button-card
template: button_spots_group
entity: light.living_ceiling_3_wall
name: Wall
icon: mdi:theater
grid:
- grid-template-areas: ' "n i "'
to switch name and icon. But made an error and double quoted both. using the above no indeed switches the icon, cool! It does enlarge the rightside icon though.
without vertical-stack-in-cards:
With an entity attached, the icon is shown by default that’s why your name is partially shown. So:
show_icon: false
That’s because you didn’t follow the example 
Add this:
- grid-template-columns: 1fr 40%
yes, thanks. Really feel a bit troubled asking so much, but CSS still holds many secrets… eg, why would I need 40% , and not 30% as I have set for the icon in the template?
also, I do want to show an icon using the entity in the button, so I made id use layout: icon_name. No icon displayed… because I suspected the color to have the same color as the background and not be visible, Ive talen out that too, but still no icon? Ive checked and the entity has an icon in HA.
The aligning is a bit unexpected also, since I believed it to default to center?
using
styles:
card:
- color: '#F0C209'
should color the icon too should it?
even explicitly using show_icon: true doesn’t reveal the icon:
- type: 'custom:button-card'
name: Ceiling spots
entity: group.all_living_ceiling_spots
show_state: false
show_label: false
show_icon: true
aspect_ratio: 16/1
layout: icon_name
styles:
card:
- color: '#F0C209'
- border-radius: 12px
- border: solid 1px
- background-color: '#555B65'
- font-size: 20px
- font-weight: bold
I am having mind bending issues here: how to get the middle button (of 3) the have the same height, but 4 times the width of the 2 outer buttons… no matter what I try, the horizontal_stack is divided into 3 equal parts…while the 2 outer buttons should remain small, as the rest of the posts buttons:
should become like:
this the code for the center horizontal stack:
- type: horizontal-stack
cards:
- type: custom:button-card
template: horizontal-filler
- type: custom:button-card
template: button_spot
entity: light.hue_ambiance_spot_7
name: 7
icon: mdi:nature
- type: 'custom:button-card'
template: button_default_state
name: Ceiling spots
entity: group.all_living_ceiling_spots
show_state: false
show_label: false
show_name: false
show_icon: true
aspect_ratio: 8/1
styles:
card:
- border-radius: 6px
- border: solid 1px
- type: custom:button-card
template: button_spot
entity: light.hue_ambiance_spot_14
name: 14
icon: mdi:sofa
- type: custom:button-card
template: horizontal-filler
Even tried to nest horizontal stacks, but no difference. Only filling the stack with 4 empty cards will put the outer 2 buttons in the correct spacing and size.
would be really useful if somehow the aspect ratio could be maintained , while using a stack division over the stack members somehow.