I was wondering how you get these buttons so nicely centered on the display.
All my horizontal stacks start at the outer left edge of the screen, which on a mobile device is even uglier than on the desktop.
See my Tiles above on a card, below that the same in buttons, which are not on a card… can we somehow collect them as a group, give it a title etc. Or do we need to nest the buttons in yet another card?
desktop:
Mobile:
Use 2 blank-card in your horizontal-stack one at the beginning, one at the end, like in this post: Lovelace: Button card
Just tested this out and it did indeed update after a minute.
Yes exactly what @romrider says, they are just 2 blank button cards. One at the beginning of the horizontal-stack and one at the end. You can also use it for vertical stacks.
thx, done that. which makes it better placed indeed. Only wish we could set the gap between buttons… I know this isn’t Tiles, where that is a snap, but without any grid, and no auto sizing, this is really very difficult to setup for more than 1 display.
have another issue. Somehow the Buttons unsharpens (blurs might be too strong a word) my images. At first I thought is was the size of the images (my tiles were a bit smaller than the buttons). In the examples below, my Tiles are larger than the Buttons and still show much crispier.
The images themselves are much larger so they are not blown out of the possible size
Both photographic images as png files. Have a look ( and don’t mind the color difference which ca be caused by the opacity settings)
per set above the Tiles, below the Buttons
I don’t follow what you’re doing here.
If I add blank buttons they are the same size as the others in the horizontal stack which means that they all get resized. You seem to have narrow ones.
Unless of course you are hardcoding the widths? Which I guess means a bit of trial and error to get right and really only is useful on mobile?
This works if every other card on the line has a fixed width in px
I don’t do anything with images. I’m using the standard <img> html tag to load it.
good to know, will seek elsewhere then, the difference is rather noticeable.
Let me ask a different question please: I have a series of buttons using an operator template:
- type: custom:button-card
template: button_picture_script_small
entity: script.lighting_aan_de_slag
entity_picture: '/local/activities/aandeslag.png'
state:
- operator: template
value: >
return states['input_select.activity_lighting'].state === 'Aan de slag'
color: '#F0C209'
- operator: template
value: >
return states['input_select.activity'].state !== 'Aan de slag'
color: '#555B65'
styles:
entity_picture:
- opacity: 0.6
which is my translation for the template I use elsewhere:
templates:
style: >
if (entities['input_select.activity_lighting'].state === 'Aan de slag') return 'background-color: #F0C209';
return 'background-color: #555B65;filter:grayscale(75%)';
could the buttons use the second ‘else’ in the config, without explicitly stating
- operator: template
value: >
return states['input_select.activity'].state !== 'Aan de slag'
I mean the operator would only be needed in the === state, all else would be, well, else 
(might be a nice name for an operator…)
- operator: else
color: '#555B65'
styles:
entity_picture:
- opacity: 0.6
Ive tried to set the ‘else’ color as default for the button in the button-template, and let the operator template override that for that particular state, but that doesn’t work. The operator doesn’t override the global config so it seems.
operator: default, no value 
you’ve thought about everything! nice, thanks.
so I use:
- operator: default
color: '#555B65'
or only
operator: default
, and set the default color in the button-template? Didn’t seem to work before using:
styles:
card:
background-color: '#555B65'
Set your styles in the state with operator: default, it’s better.
If I use storage mode for the lovelace (not the yaml mode), where have to be inserted the
template: !include button_card_templates.yaml?
You can’t use includes in storage mode
Hello
how can i give an exact size for all the card and exact size for each image?
on the example on the image on the right i cannot see the ‘name’ because it is behind the image
cards:
- name: ILUMINAÇÃO DA SALA
template: header_marcelo
type: 'custom:button-card'
- cards:
- color: 'rgb(255, 228, 181)'
color_type: card
dbltap_action:
action: more-info
entity: light.luz_sala_de_estar
icon: 'mdi:ceiling-light'
name: SALA DE ESTAR
show_entity_picture: true
show_state: true
size: 62%
state:
- entity_picture: /local/images/SalaON.jpg
value: 'on'
- value: 'off'
tap_action:
action: toggle
template: cartao
type: 'custom:button-card'
- color: 'rgb(255, 228, 181)'
color_type: card
dbltap_action:
action: more-info
entity: light.luz_sala_de_jantar
icon: 'mdi:ceiling-light'
name: SALA DE JANTAR
show_entity_picture: true
size: 100%
state:
- entity_picture: /local/images/JantarON.jpg
value: 'on'
- entity_picture: /local/images/JantarOFF.jpg
value: 'off'
styles:
entity_picture:
- transform: rotate(180deg)
tap_action:
action: toggle
template: cartao
type: 'custom:button-card'
- color: auto
color_type: card
dbltap_action:
action: more-info
entity: light.yeelight_color1_04cf8c9557ff
icon: 'mdi:floor-lamp'
name: Candeeiro de pé
show_state: true
show_entity_picture: true
size: 100%
state:
- entity_picture: /local/images/salapeon.jpg
value: 'on'
- entity_picture: /local/images/salapeoff.jpg
value: 'off'
styles:
entity_picture:
- transform: rotate(90deg)
tap_action:
action: toggle
template: cartao
type: 'custom:button-card'
type: horizontal-stack
- cards:
- color: 'rgb(255, 228, 181)'
color_type: card
dbltap_action:
action: more-info
entity: light.luz_hall
icon: 'mdi:lightbulb'
name: HALL
show_state: true
show_entity_picture: true
size: 80%
state:
- entity_picture: /local/images/HallOFF.jpg
value: 'on'
- entity_picture: /local/images/HallON.jpg
value: 'off'
tap_action:
action: toggle
template: cartao
type: 'custom:button-card'
- color: auto
color_type: card
dbltap_action:
action: more-info
entity: light.luz_philips_xiaomi
icon: 'mdi:lamp'
name: APARADOR
size: 80%
tap_action:
action: toggle
template: cartao
type: 'custom:button-card'
- color: auto
color_type: card
dbltap_action:
action: more-info
state: null
entity: light.yeelight_color2_04cf8c842ee1
icon: 'mdi:television-box'
name: AMBILIGHT
size: 80%
tap_action:
action: toggle
template: cartao
type: 'custom:button-card'
type: horizontal-stack
type: vertical-stack
Question number 2
is there a way to change color only on the marked area in red ? i dont want the all the card change color when on or off…only that area
thanks
I’m struggling with ripple coloring as there is a bug in the component… So for now I won’t release a version with ripple coloring.
I’m also working on adding aspect ratio for your buttons so you’ll not need to specify width and height anymore (example: for a square, aspect ratio would be 1/1) to have buttons the way you want and this will also adapt to whatever the screen size is. I’ll need to modify slightly some CSS, I hope it will not break things too much 
but hopefully you’re all using templates now so it will be fast to fix 
State merging when using template configurations is also incoming alongside with name and entity_picture javascript templating support.
You can use size: xx%, default being 40%
Use a combination of state and style in each state just for the name:
state:
- value: 'on'
styles:
name:
- background-color: your_color
- value: 'off'
styles:
name:
- background-color: other_color
I need some advice from the brain trust. I’m attempting to use button-card to replace custon:fan-control-entity-row and have run into a bit of a wall. Using all of button-card’s new features, I have replicated the look of fan-control-entity-row while adding some nice modifications (like spinning icons).
The challenge has been getting the fan speed buttons to function in the same fashion. With fan-control-entity-row, pressing any one of the speed buttons will do the following:
If the fan is off, pressing a speed button will simultaneously turn the fan on and set the fan speed.
If the fan is on, pressing a speed button will set the fan speed.
This is where I find myself, stuck at the limits of my YAML knowledge. How does one go about creating logic that not only checks for the current state of the fan but simultaneously calls two services (fan.turn_on and fan.speed) when necessary?
I considered using conditionals to monitor the on/off state of the fan but the concept of passing two separate service calls completely eludes me.
this might help:
- type: custom:button-card
template: button_picture_script_small
entity_picture: '/local/hue_scenes/concentrate.png'
tap_action:
action: call-service
service: script.tiles_set_hue_scene
service_data:
option: 'Concentreren'
state:
- operator: template
value: >
return states['input_select.hue_scenes'].state === 'Concentreren'
color: '#a2eaf2'
- operator: default
color: grey
of course adapt the logic, but it shows how to call a script, and check for state, and act accordingly
