This should work
state:
- value: -4 # no quotes here
name: So cooold!
Very cool, as you say everything important at a glance. Would you mind sharing your lovelace config somewhere(pastebin?) please.
OMG I am such an idiot, it seems I forgot the ; at the end of the lines OMG! Oh well, it works again, thanks again for you input everyone.
I have no idea why, but the ātype:ā lines keep migrating to the bottom of the cards. Gave up trying to stop it ages ago.
Iām in the middle of fixing up the vacuum view but when Iāve done that I will.
No ; is required for styles. If you put it, the line is ignored by the code 
You sure did :-
I know its a lot of time and relentless editing to get it to where it is right now, so thank you once again.
Im not sure if this may help, in the code you shared, i did add 1 to the rgba value under styles since the value of a was missing, or maybe i have a translucent buttons and i wanted the ON to be more opaque.
state: - value: "on" styles:*emphasized text* card: - --paper-card-background-color: rgba(255, 251, 239*, 1.0*) - box-shadow: none name: - color: black state: - color: gray
I wanted to ask how is the value of the brightness displayed under 100%? mine takes a value under 255%
im using
label_template: > var bri = states['light.mbed_led'].attributes.brightness; return (bri ? bri : '0') + '%';
1 Like
Hey @RomRider , amazing work on the Button Card, its made my UI a lot more appealing and elegant , thank you on this tip, it solved the dot on the cardā¦ its much cleaner looking now.
I made some remote buttons, still making changes on them.
1 Like
Ah ok I see (not a programmer srry). Anyways then, it was the filter: invert(70%) line. I removed this and all is good now! I hardcoded the color instead of it being variable.
But anyways it no longer artifacts. Been working for a day now without problems.
I also took the time to put your card in at more locations 
Here is an example of how I use it:
@Prathik_Gopal You can use this for scaling to a 100:
label_template: >
var bri = Math.round(states['light.your_light_here'].attributes.brightness / 2.55);
return (bri ? bri : '0') + '%';
Does anyone know how to make the state a bit more pleasing aesthetically? For some reason it always shows an underscore. I know it would be possible by creating a template sensor, but if there was any faster way to do it it would be nice to know, thanks.
1 Like
Iāve finally managed to take some time and play with the card, thatās some tabs of my current setup
And another (click to zoom, I donāt know why itās not displayed correctly):
Iāll soon release the new version
3 Likes
Iāll soon introduce localization support to fix that In the meantime, you can use the label instead.
Looks awesome! Glad to see you get to enjoy the fruits of your labor, too. 
Iād love to see your YAML - is that Alexa radio section using state-switch and vertical-stack-in-card?
Alsoā¦ is that second screenshot what I think it is? A resizable version of the Light Card? I was intrigued by that card when I was first playing with Lovelace, but the lack of resizability made it a non-starter on mobile. Never mind, for some reason, that part specifically was blown up on the screenshot preview, after clicking it to show the whole screenshot I realized I donāt think you were trying to highlight that specifically. 
Yeah, I donāt know why the second image is displayed like thatā¦ 
Going to share the yaml soon, but Iām not home right now.
You are very right, it took me over 7 hours to get it exactly the way I wanted it. Trial and error and retry and retry. I am glad it helped you out. I will post a cleaned up version of the code later on as the previous code was still bloated with things I used in my previous setup.
My wife always liked the Homekit app, but she did not like the layout. As Homekit has the same tight layout as iOS it is hard to make an interface with Homekit that is not only great looking (which it already does) but most importantly easy to use. And with over 100 devices Homekit is no fun to use at all. So this made it a perfect middle route. (Though she got used to my previous setup).
Do you have 3 buttons joined up in your first screenshot without any padding between them? (The one with the padlock symbol and record player icon)
Edit: it actually looks like a vertical-stack-in-card?
Is there any way I can have the icon change color in case last_motion (as example) was less then 1 hour ago?
Also; how can I get the label closer to the bold text (so move up a bit)?
cards:
- entity: group.motion_check
icon: 'mdi:walk'
layout: icon_name
tap_action:
action: more-info
show_state: false
show_last_changed: true
show_name: yes
name: Last motion
size: 60%
styles:
card:
- height: 80px
- width: 150px
icon:
- padding: 5px 60px 0px 10px
- margin: 3px
name:
- padding: 0px 0px
- font-size: 15px
- font-family: Helvetica
- justify-self: start
- font-weight: bold
label:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: end
state:
- font-size: 15px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: end
- text-transform: capitalize
- font-weight: bold
type: 'custom:button-card'
- entity: sensor.last_pin_vera
icon: 'mdi:tag'
layout: icon_state
tap_action:
action: more-info
show_state: true
show_last_changed: true
show_name: false
name: Last tag
size: 60%
styles:
card:
- height: 80px
- width: 150px
icon:
- padding: 0px 60px 0px 10px
- margin: 5px
name:
- font-size: 13px
- font-family: Helvetica
- justify-self: end
- font-weight: bold
label:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: end
state:
- font-size: 15px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: end
- text-transform: capitalize
- font-weight: bold
type: 'custom:button-card'
type: horizontal-stackI donāt think moving the text is possible without using padding, but if I am correct (someone correct me if I am wrong) you could add this to your label or state style:
padding: 40px 0px 0px 0px
If I am correct this should move the text up but it could be one of the other numbers (which are at zero in my example). You will have to play around to be sure.
Alternatively you can wait until next update as @RomRider said it will be easier to move elements in the next version. And with the speed this man works I am guessing it will take no longer than 2 weeks.
Edit:
For the ones looking for it, I made the Homekit button code a bit cleaner, it still isnāt the cleanest, but it is less cluttered then the last code I posted.
- type: custom:button-card
entity: light.bijkeukenlamp
name: Bijkeuken
icon: "mdi:ceiling-light"
label_template: >
var bri = Math.round(states['light.bijkeukenlamp'].attributes.brightness / 2.55);
return (bri ? bri : '0') + '%';
color: auto
size: 30%
show_state: true
show_label: true
styles:
card:
- border-radius: 15px
- height: 105px
- width: 105px
- --paper-card-background-color: rgb(255, 251, 239)
icon:
- padding: 0px 60px 0px 0px
name:
- padding: 0px 10px
- font-size: 13px
- font-family: Helvetica
- justify-self: start
- font-weight: bold
label:
- color: gray
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
state:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
state:
- value: "on"
styles:
name:
- color: black
state:
- color: gray
- value: "off"
style:
- opacity: 0.4
styles:
icon:
- color: '#666666'
name:
- color: '#666666'
state:
- color: '#666666'
- value: "unavailable"
style:
- opacity: 0.2
styles:
icon:
- color: '#666666'
name:
- color: '#666666'
state:
- color: '#666666'
Thatās for the color when last changed is less then 1h:
state:
- operator: template
value: >
var last_changed = new Date(entity.last_changed);
var now = new Date();
return (now - last_changed) / 1000 / 60 / 60 <= 1
Use layout: icon_name_state2nd
It is indeed a vertical-stack-in-card, with lots of stuff inside:
- type: vertical-stack
cards:
- type: custom:button-card
name: Alexa
styles: *card-header-style
- type: horizontal-stack
cards:
- type: custom:button-card
entity: input_select.alexa_source
color_type: card
name: Webradio
icon: mdi:radio
layout: icon_name
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.alexa_source
option: 'Webradio'
styles:
card:
- font-size: 0.8em
- font-weight: bold
state:
- value: 'Webradio'
color: white
name: ā¾ Webradio ā¾
- operator: default
color: var(--paper-card-background-color)
- type: custom:button-card
entity: input_select.alexa_source
color_type: card
name: Spotify
icon: mdi:spotify
layout: icon_name
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.alexa_source
option: 'Spotify'
styles:
card:
- font-size: 0.8em
- font-weight: bold
state:
- value: 'Spotify'
color: white
name: ā¾ Spotify ā¾
- operator: default
color: var(--paper-card-background-color)
- type: custom:button-card
entity: input_select.alexa_source
color_type: card
name: Predefined
icon: mdi:format-list-bulleted-square
layout: icon_name
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.alexa_source
option: 'Predefined'
styles:
card:
- font-size: 0.8em
- font-weight: bold
state:
- value: 'Predefined'
color: white
name: ā¾ Predefined ā¾
- operator: default
color: var(--paper-card-background-color)
- type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: input_select.alexa_destination
name: Office
icon: mdi:amazon-alexa
layout: icon_name
size: 20px
styles:
card:
- font-size: 0.8em
- font-weight: bold
- height: 40px
grid:
- grid-template-columns: min-content min-content
- width: min-content
- margin: auto
- grid-gap: 0px 10px
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.alexa_destination
option: 'Office'
state:
- value: 'Office'
color: var(--paper-item-icon-active-color)
styles:
name:
- color: var(--paper-item-icon-active-color)
- operator: default
color: var(--primary-text-color)
- type: custom:button-card
entity: input_select.alexa_destination
name: Bathroom
icon: mdi:amazon-alexa
layout: icon_name
size: 20px
styles:
card:
- font-size: 0.8em
- font-weight: bold
- height: 40px
grid:
- grid-template-columns: min-content min-content
- width: min-content
- margin: auto
- grid-gap: 0px 10px
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.alexa_destination
option: 'Bathroom'
state:
- value: 'Bathroom'
color: var(--paper-item-icon-active-color)
styles:
name:
- color: var(--paper-item-icon-active-color)
- operator: default
color: var(--primary-text-color)
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: conditional
conditions:
- entity: input_select.alexa_source
state: Predefined
card:
type: custom:card-modder
style:
padding: 5px 16px
card:
type: entities
show_header_toggle: false
entities:
- input_select.predefined_music
- type: conditional
conditions:
- entity: input_select.alexa_source
state_not: Predefined
card:
type: custom:card-modder
style:
padding: 5px 16px
card:
type: entities
show_header_toggle: false
entities:
- input_text.alexa_music_input
- type: custom:button-card
icon: mdi:play
show_name: false
styles:
card:
- width: 60px
- height: 100%
tap_action:
action: call-service
service: script.alexa_play
service_data:
useless: useless
Itās a vertical stack in card with 6 buttons inside:
- type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: switch.player1_power
icon: mdi:disc-player
name: Player 1
size: 30%
lock: true
styles:
card:
- font-size: 0.8em
- height: 100%
- type: vertical-stack
cards:
- type: custom:button-card
entity: input_select.subwoofer_preset
name: Subwoofer
layout: icon_name
size: 20px
tap_action:
action: none
show_icon: true
styles:
grid:
- grid-template-columns: min-content min-content
- width: min-content
- margin: auto
- grid-gap: 0px 10px
card:
- font-size: 0.8em
- type: custom:button-card
entity: input_select.subwoofer_preset
name: 'OFF'
show_icon: false
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.subwoofer_preset
option: 'Off'
styles:
card:
- font-size: 0.8em
- font-weight: bold
state:
- value: 'Off'
styles:
name:
- color: var(--paper-item-icon-active-color)
- type: custom:button-card
entity: input_select.subwoofer_preset
name: 'LFC'
show_icon: false
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.subwoofer_preset
option: 'LFC'
styles:
card:
- font-size: 0.8em
- font-weight: bold
state:
- value: 'LFC'
styles:
name:
- color: var(--paper-item-icon-active-color)
- type: custom:button-card
entity: input_select.subwoofer_preset
name: 'LINE-IN'
show_icon: false
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.subwoofer_preset
option: 'Line-In'
styles:
card:
- font-size: 0.8em
- font-weight: bold
state:
- value: 'Line-In'
styles:
name:
- color: var(--paper-item-icon-active-color)
- type: custom:button-card
entity: switch.player2_power
icon: mdi:disc-player
name: Player 2
size: 30%
lock: true
styles:
card:
- font-size: 0.8em
- height: 100%
Before the weekend so that you have time to play with 
4 Likes