Set your styles in the state with operator: default, it’s better.
1 Like
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
1 Like
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
3 Likes
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
1 Like
1 Like
+1 for that, been fiddling with that all day, hoping it wouldn’t be necessary shortly… co cool this is going to be! thx!
So… what I would do is build a template switch that cycles through low, medium, high, and off speeds. I can help you with that if you need it.
I actually thought of doing that but ended up not going down that route since its use might require cycling through all of the speeds to arrive at the intended setting. For me, that would work well but the WAF would take a hit. 
Why not just create a script which takes an entity and a speed as inputs and call this script from 3 buttons with 3 different speeds, the script would turn_on and set the speed at the same time. The last one being off just call the fan.turn_off service? cc: @petro
Also each speed button would light up based on a state template which checks the current speed of the fan
1 Like
Ok, how about this… an entities card with a vertical-in-stack-card, made to look like a button. The vertical stack will contain 1 icon button card, icon only. 1 markdown card with the label. 1 horizontal stack with 4 square buttons, off, low medium high. I’d envision it looking like this:
yet another challenge and a bit of a search, cause the button shows a text I can’t explain, probably error code, thought the inspector doesn’t indicate an error, bottom right button:
I fear it has to do with the ‘Off’ in the code, but having it quoted should mitigate that?
please have a look at my code for this, the others are exact copies and work perfectly:
- type: custom:button-card
template: button_picture_script_small
name: 'Uit'
entity_picture: '/local/hue_scenes/off.png'
tap_action:
action: call-service
service: script.tiles_set_hue_scene
service_data:
option: 'Off'
state:
- operator: template
value: >
return states['input_select.hue_scenes'].state === 'Off'
color: 'lightgrey'
name:
color: darkgrey
- operator: default
color: grey
name:
color: lightgrey
for testing purposes I change the name from ‘Off’ to ‘Uit’, because I would have sworn the error wasn’t there before, but no effect it has. The button does work as intended and changes style on state.
Unfortunately, I’m not at home so I can’t share my precise configuration but this should give you a good visual understanding of my current progress.
The above screenshot is of the actual fan-control-entity-row card. My current iteration using button-card is visually near-identical. The entire thing exists within a vertical-in-stack card with multiple button-cards with each card representing a specific visual object (Icon, Name, speed button, etc.).
Functionally, the Icon, Name and On/Off button make the same service call - fan.toggle. There are also object specific graphical tweaks that take place based on the entity state. (Icon spins when the fan is on, etc.).
Really, the final step is figuring out how to get the speed and states acted upon. Based on @Mariusthvdb’s suggestion and @RomRider’s follow up, it sounds like a script may be the correct way forward. Now I need to learn scripting in HA. 
you need to terminate the line
value: >
return states['input_select.hue_scenes'].state === 'Off';
It’s not
name:
color: xxxx
It’s
styles:
name:
- color: xxx
PS: your javascript is fine, no need for parenthesis or ; at the end for 1 line.
1 Like
I was wondering about that, since in my whole setup I terminate JS templates indeed. These buttons apparently don’t need that, and the many I have built so far don’t throw errors or unexpected behavior…
btw, I ve tried it just now, and makes no difference
then you need it in parenthesis
EDIT: You are trying to get the word ‘true’ or ‘false’ there, correct?
Oops, missed that yes. Funny how the color does change as it should. Simply showing the error in the correct color ;0)
No, I need the word ‘Off’ to switch off the lightgroup:
now only need to find out why some change the active name color to black, and some don’t, and stay white, while I have nothing set in the config of that button:
see:
and code:
- type: custom:button-card
template: button_picture_script_small
name: Arctic
entity_picture: '/local/hue_scenes/arctic.png'
tap_action:
action: call-service
service: script.tiles_set_hue_scene
service_data:
option: 'Arctische dageraad'
state:
- operator: template
value: >
return states['input_select.hue_scenes'].state === 'Arctische dageraad'
color: '#00d0a0'
- operator: default
color: grey
- type: custom:button-card
template: button_picture_script_small
name: Relax
entity_picture: '/local/hue_scenes/relax.png'
tap_action:
action: call-service
service: script.tiles_set_hue_scene
service_data:
option: 'Ontspannen'
state:
- operator: template
value: >
return states['input_select.hue_scenes'].state === 'Ontspannen'
color: '#ffc059'
- operator: default
color: grey
- type: custom:button-card
template: button_picture_script_small
name: Clear
entity_picture: '/local/hue_scenes/clear.png'
tap_action:
action: call-service
service: script.tiles_set_hue_scene
service_data:
option: 'Helder'
state:
- operator: template
value: >
return states['input_select.hue_scenes'].state === 'Helder'
color: '#fcdb97'
- operator: default
color: grey