There’s a thread about the creation of the card
how to add the off button to the red position, and remove box-shadow below the button thanks.
type: 'custom:button-card'
custom_fields:
speed:
card:
type: 'custom:button-card'
show_name: false
size: 45%
icon: 'mdi:weather-windy'
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.rm3_mini_remote
device: fan_senko
command: speed
osc:
card:
type: 'custom:button-card'
size: 50%
icon: 'mdi:cached'
show_name: false
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.rm3_mini_remote
device: fan_senko
command: osc
mode:
card:
type: 'custom:button-card'
size: 50%
name: MOD
show_name: faldse
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.rm3_mini_remote
device: fan_senko
command: mode
styles:
grid:
- grid-template-areas: '"i i i i i" "n n n n n" ". speed osc mode ."'
- grid-template-rows: min-content 1fr 2fr
- grid-template-columns: 5% 1fr 1fr 1fr 5%
card:
- max-width: 200px
- max-height: 300px
- padding-bottom: 0
icon: 'mdi:fan'
I’m trying to use a button card to track an input_boolean. The card is inside of a popup, and when I update the sensor while it’s open, it reflects the changes. But as soon as I close the popup and reopen it, the card thinks the sensor is off, even it’s still on?
Here’s my code
https://pastebin.ubuntu.com/p/hgkHF5xhQZ/
You should create a custom field and set the position: absolute style and then move it around using top: 10px, left: 10px for eg.
Probably because of if (entity.state = 'off'). This should be if (entity.state == 'off')
thanks for the reply, but can you use the grid? and how to remove box-shadow below the button
Hi,
Anyone know a way to make the ripple effect less square when tapping on a button on mobile app?
Is that possible at all?
That is not happening by default so your config is probably producing that. Mind sharing it?
Hi,
Sure, this is one of my buttons. Actually I am using a lot of decluttering card templates, but I have created one clean example to past here, without templates.
- type: custom:button-card
entity: light.work_room
#icon: '[[icon]]'
aspect_ratio: 1/1
name: Work Room
color: auto
color_type: icon
show_last_changed: false
lock:
enabled: false
duration: 5
unlock: tap
styles:
card:
- padding: 10%
- font-size: 12px
- font-weight: bold
- text-transform: capitalize
- border-radius: 16px
- background-color: 'rgba(47, 49, 54, 0.8)'
- color: '#8D8E93'
- backdrop-filter: blur(20px)
grid:
- grid-template-areas: '"svg_icon corner" "svg_icon corner_2" "n n" "cust_1 cust_2"'
- grid-template-columns: 2fr 3fr
- grid-template-rows: 1fr 2fr 4fr 1fr
name:
- font-size: 1.20em #15px
- align-self: middle
- justify-self: start
- align-self: end
- padding-top: 8px
- padding-bottom: 4px
lock:
- color: '#BEBEBE'
custom_fields:
svg_icon:
- justify-content: start
- align-items: start
- margin: none
- height: 100%
- padding-bottom: 0px
corner:
- align-self: start
- justify-self: end
- font-size: 1em #14px
- font-weight: bold
- color: '#797A7F'
- min-width: 12px
- line-height: 22px
- padding: 0px 5px
- height: 22px
corner_2:
- padding-top: 8px
- align-self: start
- justify-self: end
- color: '#797A7F'
cust_1:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- color: '#797A7F'
cust_2:
- padding-bottom: 2px
- align-self: middle
- justify-self: end
- color: '#797A7F'
custom_fields:
svg_icon: "[[[
const state = entity.state === 'on' ? 'animate' : null;
return `<svg viewBox='0 0 24 24'>
<path fill='#9da0a2' d='M8,9H11V4H13V9H16L20,17H4L8,9M14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18H14Z'/>
<path class='${state}' fill='var(--button-card-light-color-no-temperature)' d='m 7.957375,9 h 3 -3 8 -3 3 l 4.062,8 h -16 l 3.938,-8 m 6.06975,5.256348 c 0.763134,0.727302 -0.531684,1.303507 -1.636253,1.303507 -1.104569,0 -3.0516803,-1.562904 -3.0602403,-2.667473 z'/> </svg>`;
]]]"
corner: ""
corner_2: ""
cust_1: "[[[ return entity.state ]]]"
cust_2: ""
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
state:
- value: "on"
styles:
card:
- background-color: '#393C43'
- color: '#F0F0F0'
custom_fields:
cust_1:
- color: '#A5A7AB'
cust_2:
- color: '#A5A7AB'
- value: "unavailable"
styles:
icon:
- color: '#7F848E'
name:
- color: '#7F848E'
custom_fields:
svg_icon:
- --button-card-light-color-no-temperature: '#7F848E'
corner:
- color: '#7F848E'
corner_2:
- color: '#7F848E'
cust_1:
- color: '#7F848E'
cust_2:
- color: '#7F848E'
1 Like
I’m trying to create a template for buttons like yours. Would you mind sharing the coffee for these buttons?
How do I define background color for cards based on states?
I.e. State On sets red, off sets blue etc…
Peace 
I cant get the circle to be seen. The value at State On is shown…
I’m using a light template, is that the fault here?
Would be helpful if you posted your config…
Do you have active-color in your theme?.
For testing purposes, try a hard coded color.
cards:
- type: grid
cards:
- type: grid
cards:
- entity: light.kok
icon: 'mdi:silverware-variant'
name: Köket
theme: noctis
template: light
type: 'custom:button-card'
- entity: light.tv_vardagsrum_och_hall
icon: 'mdi:lightbulb-group-outline'
name: Hela VDR
template: light
type: 'custom:button-card'
- entity: light.tv_rum
icon: 'mdi:sofa-outline'
name: 'Lampor vid TV:n'
template: light
type: 'custom:button-card'
- entity: light.sovrummets_fonsterlampor
icon: 'mdi:bed-outline'
name: Sovrummet
template: light
type: 'custom:button-card'
square: false
columns: 4
- type: grid
cards:
- type: 'custom:slider-entity-row'
entity: light.kok
name: hide_state
full_row: true
hide_state: true
- type: 'custom:slider-entity-row'
entity: light.tv_vardagsrum_och_hall
name: hide_state
full_row: true
hide_state: true
- type: 'custom:slider-entity-row'
entity: light.tv_rum
name: hide_state
full_row: true
hide_state: true
- type: 'custom:slider-entity-row'
entity: light.sovrummets_fonsterlampor
name: hide_state
full_row: true
hide_state: true
columns: 4
square: false
columns: 1
square: false
light:
aspect_ratio: 1/1
color: auto-no-temperature
color_type: card
tap_action:
action: toggle
hold_action:
action: more-info
show_icon: true
show_name: true
custom_fields:
info: |
[[[ if (entity.state == 'on' && entity.attributes.brightness) {
const brightness = Math.round(entity.attributes.brightness/2.54);
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}"
stroke="var(--active-color)" stroke-width="2" fill="none"
style="transform: rotate(-90deg); transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
stroke-dashoffset: ${circumference - brightness / 100 * circumference};" />
<text x="50%" y="54%" fill="white" font-size="16"
text-anchor="middle" alignment-baseline="middle">
${brightness}<tspan font-size="10">%</tspan></text></svg>`;} ]]]
styles:
custom_fields:
info:
- position: absolute
- right: 5%
- top: 10%
- width: 30%
card:
- font-size: 90%
- border-radius: 1ems
state:
- value: 'off'
styles:
icon:
- color: black
- value: 'on'
styles:
icon:
- color: white
did you test the hard coded color, and, do you have the var(–active-color) in your theme?
Hi
To the best of my knowledge i don’t have the var(--active-color) in my theme.
I have no theme implemented in HA yet…
Did you try the fixed color?
I’m trying to create a button with a custom_field icon, depending on the state of a cover (open/closed).
The below does not work, I cannot get the dynamic state-icon.
type: 'custom:button-card'
entity: cover.office
name: Office
icon: 'mdi:chair-rolling'
color: auto
show_state: false
custom_fields:
state_icon: >
[[[
return `<ha-icon
icon= >
[[[ if (states['cover.office'].state == 'open')
return 'mdi:blinds-open'
return 'mdi:blinds';
]]]
style="width: 25px; height: 25px;">
</ha-icon>`
]]]
styles:
card:
- height: 100px
grid:
- position: relative
custom_fields:
state_icon:
- position: absolute
- left: 75%
- top: 12%
tap_action:
action: toggle
double_tap_action:
action: call-service
service: cover.stop_cover
service_data:
entity_id: cover.office
hold_action:
action: more-info
when I replace the dynamic icon with the static icon like the below, the button works as expected:
state_icon: >
[[[
return `<ha-icon
icon="hass:blinds"
style="width: 25px; height: 25px;">
</ha-icon>`
]]]
But the dynamic version below does not work - can someone help me to fix this?
Help would be much appreciated! thank you
state_icon: >
[[[
return `<ha-icon
icon= >
[[[ if (states['cover.office'].state == 'open')
return 'mdi:blinds-open'
return 'mdi:blinds';
]]]
style="width: 25px; height: 25px;">
</ha-icon>`
]]]
getting an error with this … any help please?
type: 'custom:button-card'
entity: scene.safe_mode
show_state: true
icon: 'mdi:home'
hold_action:
action: none
tap_action:
action: call-service
service: scene.turn_on
service_data: {}
target:
entity_id: scene.safe_mode
Try:
type: 'custom:button-card'
show_state: true
icon: 'mdi:home'
hold_action:
action: none
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.safe_mode
Hi All,
I have some button cards. They work but changing color is not working.
When I change from high to low or low to medium the color is not change from yellow to almost transparant. When I refresh browser its good.
How to solve this?
button_card_templates:
fan-settings:
size: 15%
styles:
card:
- font-size: 14px
- height: 60px
- cards:
- type: 'custom:button-card'
template: fan-settings
name: low
icon: 'hass:fan'
tap_action:
action: call-service
service: fan.set_preset_mode
service_data:
entity_id: fan.afzuiging_badkamer
preset_mode: low
styles:
card:
- background-color: |
[[[
if ((states['fan.afzuiging_badkamer'].attributes.preset_mode === 'low') && (states['fan.afzuiging_badkamer'].state === 'on'))
return 'rgba(251, 214, 67,1)';
return 'rgba(10,10,10,0,1)';
]]]
- type: 'custom:button-card'
template: fan-settings
name: med
icon: 'hass:fan'
tap_action:
action: call-service
service: fan.set_preset_mode
service_data:
entity_id: fan.afzuiging_badkamer
preset_mode: medium
styles:
card:
- background-color: |
[[[
if ((states['fan.afzuiging_badkamer'].attributes.preset_mode === 'medium') && (states['fan.afzuiging_badkamer'].state === 'on'))
return 'rgba(251, 214, 67,1)';
return 'rgba(10,10,10,0,1)';
]]]
- type: 'custom:button-card'
template: fan-settings
name: high
icon: 'hass:fan'
tap_action:
action: call-service
service: fan.set_preset_mode
service_data:
entity_id: fan.afzuiging_badkamer
preset_mode: high
styles:
card:
- background-color: |
[[[
if ((states['fan.afzuiging_badkamer'].attributes.preset_mode === 'high') && (states['fan.afzuiging_badkamer'].state === 'on'))
return 'rgba(251, 214, 67,1)';
return 'rgba(10,10,10,0,1)';
]]]
type: horizontal-stack