Hello eveyrone,
I recently started playing with a custom made dashboard that I found online.
It has these nice custom button cards that I saw posted by some other people here too.
I have some custom made countdown timers for specific devices. Is there a way I could have the timer shown in the circle and the circle to react to the timer until it finishes and the circle disappears?
If so can someone share some code? Thanks in advance!
type: custom:button-card
name: Dämmerung
icon: mdi:weather-sunset
entity: input_number.tageszeit
show_label: false
show_state: false
styles:
grid:
- grid-template-areas: '"i n arrow" "i s arrow"'
- grid-template-columns: 60px 1fr 20px
icon:
- width: 30px
- color: black
img_cell:
- background: '#FF7F3E'
- border-radius: 515px
- width: 50px
- height: 50px
name:
- justify-self: start
- font-size: 14px
- font-weight: 500
- padding-left: 10px
card:
- margin: 0
- border-radius: 50px
- padding: 12px 14px 12px 4px
state:
- justify-self: start
- font-size: 14px
- color: null
- opacity: '0.8'
- padding-left: 10px
custom_fields:
arrow:
- justify-self: end
- font-size: 14px
- color: black
- opacity: '0.7'
is it possible to change the img_cell color based on the number value on my number helper, here on number 1 show color orange else show img_cell color green
Like this?
type: custom:button-card
name: Dämmerung
icon: mdi:weather-sunset
entity: input_number.tageszeit
show_label: false
show_state: false
styles:
grid:
- grid-template-areas: '"i n arrow" "i s arrow"'
- grid-template-columns: 60px 1fr 20px
icon:
- width: 30px
- color: black
img_cell:
- background: |
[[[ if (entity.state < 50) return '#FF7F3E';
if (entity.state >= 50 && entity.state < 75) return 'yellow';
else return 'lime'; ]]]
- border-radius: 515px
- width: 50px
- height: 50px
name:
- justify-self: start
- font-size: 14px
- font-weight: 500
- padding-left: 10px
card:
- margin: 0
- border-radius: 50px
- padding: 12px 14px 12px 4px
state:
- justify-self: start
- font-size: 14px
- color: null
- opacity: '0.8'
- padding-left: 10px
custom_fields:
arrow:
- justify-self: end
- font-size: 14px
- color: black
- opacity: '0.7'
yea, better but it is a static value so my Problem ist now:
on value 2 yellow
on value 1 (under) black and 3 (above) also black
ty for the fast answer
img_cell:
- background: |
[[[ if (entity.state == 2) return '#F5DD61';
else return '#222831'; ]]]
ahh man got i know thanks 
Hi Home Assistant community,
Im brandnew in HomeAssistant and my English isnt the best, but I will try my best.
I am sometimes almost overwhelmed by the many possibilities in Home Assistant, there is actually nothing that cannot be realised. I like the custom button cards, which brings me to my first post.
I created such a button:
My problem is that I`m not able to bring the icon to the left side (over the complete hight) and then the name and the state_content to the right: This is the code:
type: custom:button-card
entity: light.dg_schlafzimmer_play_2
show_state: true
name: Büro Play 2
style:
- text-transform: none
- color: rgb(28, 128, 199)
- font-weight: bold
- font-size: 4px
size: 20%
styles:
card:
- font: 10px Arial
- color: var(--button-card-light-color)
tap-action:
action: more-info
hold-action:
action: more-info
icon: mdi:desk-lamp-on
color: auto
action: more_info
state:
- value: 'on'
styles:
card:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
- box-shadow: 0 0 0.95rem 0.2rem var(--button-card-light-color)
- transition: all 2s ease
state_content:
- brightness
- last-changed
I think for you specialists it`s maybe a nobrainer, but for me at the moment overload 
Thanks so much for your help and kind regards
Niklas
something like i_n_s should do it, (complete high is a matter of opinion) , styles could be of help here
Hi all. New to the custom button card. I’m creating a single page and using mushroom light card etc. in code editor mode the entities/button show rounded corners. When in live view everything is square.
Sure it’s something simple anyone know the answer please.
Thanks
Test if this adjusts the border-radius using your entity.
Ensure you don’t have a theme overriding the style
type: custom:button-card
entity: light.pc_lights
styles:
card:
- border-radius: 30px
This only seems to work for the full screen button card in the global setting. Doesn’t adjust individual entities within the button card. Tried various version of this code you provided in the entities code as well and no change. It’s weird how in edit mode it displays correctly.
Sorry for the delayed response. Are you using button cards inside a button card?
Please post your code for evaluation.
Could someone please tell me what I’m doing wrong, for some reason the icons /text are anchored the bottom left.
I tried using:
- align-self: center
- justify-self: center
but that didn’t help.
type: custom:button-card
entity: person.timmy
show_name: false
show_icon: false
styles:
card:
- box-shadow: none
- border-radius: 0
- padding: 10%
- font-size: 14px
- text-shadow: 0px 0px 0px black
- text-transform: capitalize
- height: 60px
custom_fields:
status: |
[[[
if (states['person.timmy'].state =='not_home') {
return `<ha-icon icon="mdi:home-export-outline"
style="width: 30px; height: 30px;">
</ha-icon><span> Away</span>`;
}
if (states['person.timmy'].state =='home') {
return `<ha-icon
icon="mdi:home"
style="width: 30px; height: 30px;">
</ha-icon><span> </br>${entity.state}</span>`;
} else {
return `<ha-icon
icon="mdi:map-marker-radius"
style="width: 30px; height: 30px;">
</ha-icon><span> ${entity.state}</span>`;
}
]]]
Let’s start without custom fields and adjust from there…
type: custom:button-card
entity: person.timmy
show_name: false
show_icon: true
icon: |
[[[ return entity.state === 'not_home' ? 'mdi:home-export-outline' : 'mdi:home';
]]]
styles:
card:
- box-shadow: none
- border-radius: 0
- padding: 10%
- font-size: 14px
- text-shadow: 0px 0px 0px black
- text-transform: capitalize
icon:
- height: 30px
- width: 30px
- color: red
Hi
No problem, thank you for replying. yes button inside button. I did try tinkering with CSS within the buttons shown in original post but could’nt get it to change. cheers
kiosk_mode:
kiosk: true
views:
- title: Home
type: panel
cards:
- type: custom:button-card
show_state: false
tap_action:
action: none
custom_fields:
MBCevietv:
card:
type: custom:mini-media-player
entity: media_player.evies_tv
group: false
volume_stateless: false
info: scroll
MBCeviesele:
card:
type: custom:mushroom-light-card
entity: light.elephant_lamp_light
name: Elephant Lamp
icon: mdi:lightbulb
show_brightness_control: true
tap_action:
action: toggle
MBCevieslight:
card:
type: custom:mushroom-light-card
entity: light.evies_room
name: Evies Light
icon: mdi:lightbulb
show_brightness_control: true
tap_action:
action: toggle
MBCtedslight:
card:
type: custom:mushroom-light-card
entity: light.bedroom
name: Teds Light
icon: mdi:lightbulb
show_brightness_control: true
tap_action:
action: toggle
MBCtedstar:
card:
type: custom:mushroom-entity-card
entity: switch.teds_socket_s1
name: Teds Star Light
layout: vertical
tap_action:
action: toggle
MBCbrowser:
card:
type: custom:browser-control-card
hide_fullscreen: false
hide_screenlock: true
hide_zoom: true
hide_refresh: false
no_padding: true
small_buttons: true
MBCyard:
card:
type: custom:mushroom-light-card
entity: light.yard_light
name: Yard Flood
icon: mdi:light-flood-up
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
layout: vertical
MBCkitchen:
card:
type: custom:mushroom-light-card
entity: light.gpio12
name: Kitchen Spots
icon: mdi:lightbulb-spot
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
layout: vertical
MBClrspots:
card:
type: custom:mushroom-light-card
entity: light.living_room_spots_socket_1
name: Living Room Spots
icon: mdi:lightbulb-spot
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
layout: vertical
MBCchipbanner:
card:
type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.aaron
- type: entity
entity: sensor.shellyem_c7f463_channel_1_power
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
- type: light
entity: light.comms_cupboard
content_info: name
name: Comms Cupboard
- type: entity
entity: switch.boiler_switch_0
name: Heating
content_info: name
MBCcal:
card:
type: calendar
entities:
- calendar.events
MBCunderstairs:
card:
type: custom:mushroom-light-card
entity: light.back_right
name: Understairs Spots
icon: mdi:lightbulb-spot
show_brightness_control: true
MBClr_light:
card:
type: custom:mushroom-light-card
entity: light.living_room_light_light
name: Living Room
icon: mdi:lightbulb-spot
show_brightness_control: true
MBCdr_spots:
card:
type: custom:mushroom-light-card
entity: light.dining_room_2
name: Dining Room
icon: mdi:lightbulb-spot
show_brightness_control: true
MBCshed_cam:
card:
type: custom:webrtc-camera
url: shed
MBCshedrear_cam:
card:
type: custom:webrtc-camera
url: shedrear
MBCanpr_cam:
card:
type: custom:webrtc-camera
url: anpr
MBCyard_cam:
card:
type: custom:webrtc-camera
url: yard
MBCfront_door_cam:
card:
type: custom:webrtc-camera
url: front_door
MBCyard_ptz_cam:
card:
type: custom:webrtc-camera
url: ptz
styles:
card:
- padding: 22px
- align-self: start
- width: 1080px
- height: 1920px
- opacity: 1
- background-color: black
custom_fields:
MBCevietv:
- position: absolute
- top: 382px
- left: 780px
- width: 290px
- height: 30px
- font-size: 15px
MBCeviesele:
- position: absolute
- top: 622px
- left: 440px
- width: 200px
- height: 30px
- font-size: 15px
MBCevieslight:
- position: absolute
- top: 501px
- left: 440px
- width: 200px
- height: 30px
- font-size: 15px
MBCtedslight:
- position: absolute
- top: 382px
- left: 440px
- width: 200px
- height: 30px
- font-size: 15px
MBCtedstar:
- position: absolute
- top: 382px
- left: 645px
- width: 130px
- height: 30px
- font-size: 15px
MBCyard:
- position: absolute
- top: 622px
- left: 205px
- width: 200px
- height: 30px
- font-size: 15px
MBCkitchen:
- position: absolute
- top: 622px
- left: 2px
- width: 200px
- height: 30px
- font-size: 15px
MBCunderstairs:
- position: absolute
- top: 500px
- left: 205px
- width: 200px
- height: 30px
- font-size: 15px
MBClrspots:
- position: absolute
- top: 382px
- left: 205px
- width: 200px
- height: 30px
- font-size: 15px
MBCchipbanner:
- position: absolute
- top: 320px
- left: 2px
- width: 1080px
- height: 60px
- font-size: 15px
- background-color: black
MBCbrowser:
- position: absolute
- top: 2px
- left: 910px
- width: 165px
- height: 65px
- font-size: 12px
- background-color: black
MBCcal:
- position: absolute
- top: 1290px
- left: 780px
- width: 300px
- height: 540px
- font-size: 16px
MBClr_light:
- position: absolute
- top: 380px
- left: 2px
- width: 200px
- height: 30px
- font-size: 16px
MBCdr_spots:
- position: absolute
- top: 500px
- left: 2px
- width: 200px
- height: 30px
- font-size: 16px
MBCshedrear_cam:
- position: absolute
- top: 2px
- left: 818px
- width: 260px
- height: 147px
MBCshed_cam:
- position: absolute
- top: 2px
- left: 550px
- width: 260px
- height: 147px
MBCanpr_cam:
- position: absolute
- top: 2px
- left: 2px
- width: 260px
- height: 147px
MBCfront_door_cam:
- position: absolute
- top: 160px
- left: 2px
- width: 260px
- height: 147px
MBCyard_cam:
- position: absolute
- top: 2px
- left: 278px
- width: 260px
- height: 147px
MBCyard_ptz_cam:
- position: absolute
- top: 160px
- left: 278px
- width: 260px
- height: 147px
name:
- justify-self: start
- align-self: start
- font-size: 24px
- font-weight: 500
- color: white
- title: buttons
path: buttons
cards:
- type: custom:webrtc-camera
url: front_door
- type: custom:browser-control-card
hide_fullscreen: false
hide_screenlock: true
hide_zoom: true
hide_refresh: true
no_padding: true
small_buttons: true
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.aaron
- type: entity
entity: sensor.shellyem_c7f463_channel_1_power
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
When using different card types in the custom fields you need to switch to card mod to style the CSS
Quick example
type: custom:button-card
show_state: false
tap_action:
action: none
custom_fields:
MBCyard:
card:
type: custom:mushroom-light-card
entity: light.yard_light
icon: mdi:light-flood-up
card_mod:
style: |
ha-card {
background: blue !important;
}
cheers, new to this CSS etc!! will give it a go.
Thank you, this makes it a bit easier to work with.
I managed to get my text state in here, still working on the colour.
type: custom:button-card
entity: person.timmy_clark
show_name: true
name: |
[[[
if (states['person.timmy'].state =='not_home') {
return ` Away`;
color = 'red'
}
if (states['person.timmy'].state =='home') {
return `${entity.state}`;
color = 'red'
} else {
return `${entity.state}`;
color = 'yellow'
}
]]]
show_icon: true
icon: >
[[[ return entity.state === 'not_home' ? 'mdi:home-export-outline' :
'mdi:home';
]]]
styles:
card:
- box-shadow: none
- border-radius: 0
- padding: 10%
- font-size: 14px
- text-shadow: 0px 0px 0px black
- text-transform: capitalize
icon:
- height: 30px
- width: 30px
I have a couple of things that I’m working on, like the proximity.
I was first making sure that I got the information that I wanted and managed to do that.
Next step would be to show if I’m home, at work or any other zone that’s been setup with the name of that zone and if not the direction of travel with the km to home.
type: custom:button-card
styles:
card:
- box-shadow: none
- border-radius: 0
- padding: 10%
- font-size: 14px
- text-shadow: 0px 0px 0px black
- text-transform: capitalize
- height: 60px
custom_fields:
proximity: |
[[[
return `<ha-icon
icon="mdi:map-marker-distance"
style="width: 26px; height: 26px;">
</ha-icon> </br> <span>${states['proximity.timmy'].state} Km</span>`
]]]
Thank you very much for your help, and sorry for the reply.
I messed up as it should go to a “new answer”
This is a little simpler code and adds the color to the name
type: custom:button-card
entity: person.timmy_clark
show_name: true
name: |
[[[ return entity.state === 'not_home' ? 'Away' :
'Home';
]]]
show_icon: true
icon: >
[[[ return entity.state === 'not_home' ? 'mdi:home-export-outline' :
'mdi:home';
]]]
styles:
card:
- box-shadow: none
- border-radius: 0
- padding: 10%
- font-size: 14px
- text-shadow: 0px 0px 0px black
- text-transform: capitalize
icon:
- height: 30px
- width: 30px
- color: |
[[[
if (entity.state ==='not_home' || entity.state == 'home') return 'red';
else return 'yellow';
]]]
name:
- color: |
[[[
if (entity.state ==='not_home' || entity.state == 'home') return 'red';
else return 'yellow';
]]]
Another method
type: custom:button-card
entity: person.timmy_clark
show_name: true
icon: >
[[[ return entity.state === 'not_home' ? 'mdi:home-export-outline' :
'mdi:home';
]]]
state:
- value: not_home
styles:
icon:
- color: red
name:
- color: red
- value: home
styles:
icon:
- color: yellow
name:
- color: yellow
styles:
card:
- box-shadow: none
- border-radius: 0
- padding: 10%
- font-size: 14px
- text-shadow: 0px 0px 0px black
- text-transform: capitalize
icon:
- height: 30px
- width: 30px
Thank you very much. I managed to get most of the things working.
I used the second variant to add the colours because I needed more than two states.
The only problem I have left is the battery / proximity colouring.
I added this colouring to the battery, but guess I need to add the following line somewhere within the colour function const batteryLevel = states['sensor.iphone_battery_level'].state so that I know what to do, I tried adding it with a - but that didn’t work.
This is what the stack looks like.
If you see any room for improvement, please let me know.
type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.iphone_battery_level
show_name: true
name: |
[[[
if (states['sensor.iphone_battery_state'].state =='Charging') {
return `${states['sensor.iphone_battery_level'].state}`;
} else {
return `${entity.state}`;
}
]]]
show_icon: true
icon: |
[[[
const batteryLevel = states['sensor.iphone_battery_level'].state;
if (states['sensor.iphone_battery_state'].state =='Charging') {
return ``;
}
if (batteryLevel <= 10) {
return 'mdi:battery-10';
}
if (batteryLevel <= 20) {
return 'mdi:battery-20';
}
if (batteryLevel <= 30) {
return 'mdi:battery-30';
}
if (batteryLevel <= 40) {
return 'mdi:battery-40';
}
if (batteryLevel <= 50) {
return 'mdi:battery-50';
}
if (batteryLevel <= 60) {
return 'mdi:battery-60';
}
if (batteryLevel <= 70) {
return 'mdi:battery-70';
}
if (batteryLevel <= 80) {
return 'mdi:battery-80';
}
if (batteryLevel <= 90) {
return 'mdi:battery-90';
} else {
return `mdi:battery`;
}
]]]
state:
- value: batteryLevel <= 90
styles:
icon:
- color: green
- value: batteryLevel <= 75
styles:
icon:
- color: lightgreen
- value: batteryLevel <= 50
styles:
icon:
- color: yellow
- value: batteryLevel <= 30
styles:
icon:
- color: orange
- value: batteryLevel <= 20
styles:
icon:
- color: red
styles:
card:
- box-shadow: none
- border-radius: 0
- padding: 10%
- font-size: 14px
- text-shadow: 0px 0px 0px black
- text-transform: capitalize
icon:
- height: 30px
- width: 30px
- type: custom:button-card
entity: sensor.iphone_connection_type
show_name: true
name: |
[[[
if (states['sensor.iphone_connection_type'].state =='Wi-Fi') {
return `${states['sensor.iphone_ssid'].state}`;
}
if (states['sensor.iphone_connection_type'].state =='Cellular') {
return `${entity.state}`;
} else {
return `${entity.state}`;
}
]]]
show_icon: true
icon: |
[[[
return entity.state === 'Wi-Fi' ? 'mdi:wifi' : 'mdi:signal-cellular-3';
]]]
styles:
card:
- box-shadow: none
- border-radius: 0
- padding: 10%
- font-size: 14px
- text-shadow: 0px 0px 0px black
- text-transform: capitalize
icon:
- height: 30px
- width: 30px
- type: custom:button-card
entity: sensor.iphone_steps
show_name: true
name: |
[[[
if (states['sensor.iphone_steps'].state =='Charging') {
return `${states['sensor.iphone_steps'].state}`;
} else {
return `${entity.state}`;
}
]]]
show_icon: true
icon: |
[[[
const stepCount = states['sensor.iphone_steps'].state;
if (states['sensor.iphone_steps'].state =='Charging') {
return ``;
}
if (stepCount >= 8000) {
return 'mdi:star';
}
if (stepCount >= 6000) {
return 'mdi:walk';
}
if (stepCount >= 4000) {
return 'mdi:walk';
}
if (stepCount >= 2000) {
return 'mdi:walk';
}
if (stepCount >= 1000) {
return 'mdi:walk';
} else {
return ``;
}
]]]
styles:
card:
- box-shadow: none
- border-radius: 0
- padding: 10%
- font-size: 14px
- text-shadow: 0px 0px 0px black
- text-transform: capitalize
icon:
- height: 30px
- width: 30px
- type: custom:button-card
entity: proximity.timmy
show_name: true
name: |
[[[
if (states['proximity.timmy'].state =='0') {
return `Home`;
} else {
return `${states['proximity.timmy'].state} KM`;
}
]]]
show_icon: true
icon: |
[[[
return entity.state === '0' ? 'mdi:home-account' : 'mdi:map-marker-distance';
]]]
state:
- value: 0
styles:
icon:
- color: lightgreen
styles:
card:
- box-shadow: none
- border-radius: 0
- padding: 10%
- font-size: 14px
- text-shadow: 0px 0px 0px black
- text-transform: capitalize
icon:
- height: 30px
- width: 30px
- type: custom:button-card
entity: person.timmy
show_name: true
name: |
[[[
if (states['person.timmy'].state =='not_home') {
return ` Away`;
}
if (states['person.timmy'].state =='Communicode') {
return `Communicode`;
}
if (states['person.timmy'].state =='home') {
return `${entity.state}`;
} else {
return `${entity.state}`;
}
]]]
show_icon: true
icon: >
[[[ return entity.state === 'not_home' ? 'mdi:home-export-outline' :
'mdi:home';
]]]
state:
- value: not_home
styles:
icon:
- color: red
- value: home
styles:
icon:
- color: lightgreen
- value: Communicode
styles:
icon:
- color: deepskyblue
styles:
card:
- box-shadow: none
- border-radius: 0
- padding: 10%
- font-size: 14px
- text-shadow: 0px 0px 0px black
- text-transform: capitalize
icon:
- height: 30px
- width: 30px
Isn’t the battery icon color covered here?
state:
- value: batteryLevel <= 90
styles:
icon:
- color: green
- value: batteryLevel <= 75
styles:
icon:
- color: lightgreen
- value: batteryLevel <= 50
styles:
icon:
- color: yellow
- value: batteryLevel <= 30
styles:
icon:
- color: orange
- value: batteryLevel <= 20
styles:
icon:
- color: red
When I entered just the battery code, this was the results
We could probably trim things up by using variables