I used this, so funny,
- type: 'custom:card-modder'
style:
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)'
height: 25px
box-shadow: 2px 2px rgba(0,0,0,0.0)
card:
content: ' '
type: markdown
Edit: I actually did this a few weeks ago when the 2.0 app went into public beta, I had that problem then and didn’t know what to do about it 
this is what I came up with.
After some more playing around I think it is getting very very close to a Homekit button
Once again great card @RomRider
Edit: And here my latest take on the Apple Homekit button card 
(This is not FINAL)
Looks great. How do you get the multiple icons at the bottom of the buttons?
I used the Vertical-stack-in-card to nest them underneath. The entire thing from the 1st Lamp card down to the end of the aircon settings are nested within a vertical-stack, with horizontal-stack and vertical-stack-in-card cards throughout. It’s 1191 lines long.
This is the first ‘card’ with the Lamp icon. :
cards:
- color: auto
entity: light.lounge
hold_action:
action: more-info
icon: 'mdi:lamp'
show_name: false
show_state: false
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: light.lounge
type: 'custom:button-card'
- cards:
- color: auto
entity: binary_sensor.ms_lounge
icon: 'mdi:run'
show_name: false
show_state: false
state:
- color: 'rgb(221, 232, 6)'
icon: 'mdi:run'
value: 'on'
- color: 'rgb(91, 237, 54)'
icon: 'mdi:walk'
value: 'off'
styles:
card:
- transform: scale(1)
tap_action:
action: more-info
type: 'custom:button-card'
- color: auto
entity: sensor.front_door
icon: 'mdi:door'
show_name: false
show_state: false
state:
- color: 'rgb(221, 232, 6)'
icon: 'mdi:door-open'
value: Open
- color: 'rgb(91, 237, 54)'
icon: 'mdi:door-closed'
value: Closed
styles:
card:
- transform: scale(1)
tap_action:
action: more-info
type: 'custom:button-card'
- color: auto
entity: sensor.side_window
icon: 'mdi:window-open'
name: ' '
show_state: false
state:
- color: 'rgb(221, 232, 6)'
icon: 'mdi:window-open'
value: Open
- color: 'rgb(91, 237, 54)'
icon: 'mdi:window-closed'
value: Closed
styles:
card:
- transform: scale(1)
tap_action:
action: more-info
type: 'custom:button-card'
type: horizontal-stack
type: 'custom:vertical-stack-in-card'very nice indeed!
now for the code…:? Please don’t let us crawl your entire config 
Sure, I can share it, but it is in no means perfect, I just quickly did some copy/pasting whilst I had my old config still in there, I just removed the lines that were necessary to show what I wanted. I will clean it up later. For now you can do with this:
- type: horizontal-stack
cards:
- type: 'custom:card-modder'
style:
border-radius: 15px
--paper-card-background-color: 'rgba(0, 0, 0, 0.0)'
box-shadow: 2px 2px rgba(0,0,0,0.0)
padding: 0px 10px
height: 33px
card:
content: '##### Bijkeuken'
type: markdown
- cards:
- type: 'custom:button-card'
color_type: blank-card
styles:
card:
- width: 13px
- type: custom:button-card
entity: switch.wasmachine
name: Wasmachine
icon: "mdi:washing-machine"
label: .
color: auto
size: 25%
show_state: true
show_label: true
styles:
card:
- border-radius: 15px
- height: 105px
- width: 105px
icon:
- padding: 0px 60px 0px 0px
- margin: -10px
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:
card:
- --paper-card-background-color: rgba(255, 251, 239)
- box-shadow: none
name:
- color: black
state:
- color: gray
- value: 'off'
styles:
card:
- --paper-card-background-color: '#FFFFFF'
- filter: opacity(40%)
icon:
- filter: invert(70%)
name:
- filter: invert(70%)
state:
- filter: invert(70%)
- value: "unavailable"
style:
- opacity: 0.2
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: success
Hi all
I have this button and I would like to change also the background color.
Now I’m changing the text and icon colors, but I’m not able to do it with background.
- type: custom:button-card
entity: switch.presa_comodino
icon: mdi:lamp
name: Comodino
show_label: true
state:
- value: 'on'
label: "Acceso"
color: green
styles:
label:
- color: green
name:
- color: green
- value: 'off'
label: "Spento"
styles:
label:
- color: grey
styles:
label:
- font-size: 15px
name:
- font-size: 15px
- font-familly: cursive
card:
- font-size: 14px
- font-weight: bold
With this result
How can I do it?
Thanks
Add this to the card style:
--paper-card-background-color: rgba(255, 251, 239, 0.5)
Replace the values for your desired ones.
Thanks
I’ve done it like this
card:
- --paper-card-background-color: 'rgba(255, 255, 255, 1)'
under styles when value is ‘on’
Thanks. Will give it a try.
cool, thanks!
did some resource study comparing the old versus the new Tiles card, and found that this is the new way to makes my previously posted template possible:
type: custom:tiles-card
card_settings:
title: Family
columns: 3
row_height: 100px
gap: 10px
padding: 10px
global_settings:
background:
image_size: 75px
entities:
- entity: device_tracker.life360_name
templates:
background: >
if (state === 'home' || state === 'not_home') return 'url(\"/local/tiles/family/name_' + state + '.png\")';
return 'url(\"/local/tiles/family/name_' + entities['sensor.name_location_picture'].state + '.png\")';
style: >
if (state === 'home') return 'background-color: #008000';
if (state === 'not_home') return 'background-color: #808080';
return 'background-color: #643aac';
more_info: group.name
and add entries for all entities (family-members in this case)
because I have a longer background with the tiles card, I really dreaded changing all that, but comparing it to trying to template other cards, or nested custom cards even, it is so much simpler. Won’t go off-topic any further here, but simply point you to the source for the Tiles card: https://github.com/rodrigofragadf/lovelace-cards
will implement your Buttons later on, and hope to enjoy them in a simpler setup… thanks again!
Nice job! really looking good.
Hope you don’t mind asking: Now you have quite a lot of stuff on a button / screen. Most information is there actually triple, sometimes four times. eg when you have a light on: Icon is yellow, button is bright, it mentions “on” and if dimmable there is a number%. They all tell you the same info “light is on”. Does that not cause more ‘cluttering’ then needed to give you the info you would want to see at a glance?
I was able to get it done with this card
Anchors
anchors:
# CUSTOM BUTTON-CARDS (MAIN LABEL)
custom_button_label: &custom_button_main_label
type: custom:button-card
show_name: false
show_icon: false
show_label: true
styles:
card:
- height: 50px
- --ha-card-background: "rgba(0, 0, 0, 0.0)"
- --ha-card-box-shadow: 'none'
label:
- justify-self: start
- padding-left: 20px
custom_button_label_on: &custom_button_label_on
type: custom:button-card
color: auto
show_name: true
show_icon: false
name: 'on'
state:
- value: 'on'
styles:
card:
- --paper-card-background-color: rgba(20, 20, 20, 0.4)
- value: 'off'
styles:
card:
- border-style: solid
- border-width: 2px
- border-color: rgba(20, 20, 20, 0.4)
styles:
card:
- border-radius: 20px
- height: 50px
- width: 50px
custom_button_label_off: &custom_button_label_off
type: custom:button-card
color: auto
show_name: true
show_icon: false
name: 'off'
state:
- value: 'off'
styles:
card:
- --paper-card-background-color: rgba(20, 20, 20, 0.4)
- value: 'on'
styles:
card:
- border-style: solid
- border-width: 2px
- border-color: rgba(20, 20, 20, 0.4)
styles:
card:
- border-radius: 20px
- height: 50px
- width: 50px
section w/ header
- id: basement_card
type: vertical-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- <<: *custom_button_main_label
label: "Basement"
- <<: *custom_button_label_on
entity: switch.basement
tap_action:
action: call-service
service: switch.turn_on
service_data:
entity_id: switch.basement
- <<: *custom_button_label_off
entity: switch.basement
tap_action:
action: call-service
service: switch.turn_off
service_data:
entity_id: switch.basement
output:
Perhaps yes, but I wanted to make a close copy of the original homekit button. So that is why all this info is there, as it is also there within homekit. (The only thing that is different is the brightness level, which only shows on Homekit when it is actually turned on).
So as to compare:
The official Homekit button:
My version of it (yes colors are slightly off):
Well done! Text in red / green is actually quite cool also. Not sure if that can be done
It can probably be done (the red text is only available in locks and alarms on Homekit).
All other devices will be just grey like the name.
@RomRider the card is really great, however I have a slight problem. It all works fine at start, but after a few minutes this starts to happen (note that it only happens to buttons that are in the “off” state). When the button is in the “on” state nothing is wrong.
It looks like there is something off here, as it shows artifacts. (It gets worse over time, a refresh solves is temporarily).
I have used this code
That’s looks like a render bug in your browser/app, that’s not something I can fix. Maybe buy an android phone?
@jimz011 i see that happen only on the old app, its not depicting that on the new 2.0 app
And Oh, i made this, thanks to you!
Could you share your code for the gapless row ? - Lounge Kitchen Bedroom Bathroom
Thanks
