If you’re still curious about the on/off buttons, those are actually icons in a picture-elements card. I’m planning on sharing my full config soon when it’s done.
This card is truly amazing @RomRider, I actually got it to look almost like the Homekit button. The sizes are the same, text and icon placements are roughly the same. The only thing I still need to figure out is color. But here is what it looks like for now, thanks again.
Edit: And this is what it would look like if more buttons are on a page
6 Likes
Got to say, I love this button card. I now only have a few buttons in my HA views that aren’t made from this card. It’s so versatile in allowing you to configure buttons to look and act exactly as you want.
My main view is set up so that even on the ios app, I can tell at a glance exactly what’s going on in my home. And also has TV and Aircon controls, along with my notes to remind me of things to check or change. The Alarm view to give me a more detailed idea of when windows/doors opened, view the history certain entities, and lets me turn off the alarm when it’s triggered. And then light view lets me easily alter the light temps/brighness to what ever I want. My vacuum, floorplan and weather views still need work, but I’m pretty happy so far.
5 Likes
That looks awesome, I too am playing with this card now and one of the great things I can do now is have a gap between the borders of the screen and the first and last card (which takes away the ugly looking buttons that were on the side). This way I can make it so that it would behave more like a native ios app.
I am playing around a lot with the css 
I like the color picker/brightness slider card you use, I might use that too in the future, I just wish that there was a vertical brightness slider, that would be much more logical on a smartphone.
1 Like
wow, thanks for this. I am definitely going to study its possibilities!
for my main goal this moment, this doesn’t quite cut it though, since I am looking for templating the pictures, and not hard-coding, like you are doing now. That is just the thing I want to prevent…
Maybe I need to hop over to the templates -card after all, or restudy the latest (last?) Lovelace Tiles card, but last time I tried that it took me a long time to come close to my trusted Tiles setup in non-lovelace…
Im really reluctant investing hours and hours in combining the various custom-cards that continuously change their specs individually. They get to be very contrived configs, for rather simple design outsets:
If home/not_home show this picture-template and background, else show that picture template and background…
Though for experimental purposes I could use the code for other views and see what gives.
The color picker/brightness slider is the Light Entity Card. It’s great because you can choose to have them condensed down like mine or left large. And yes, I love being able to put gaps of set sizes/colours between cards. You can’t tell on those pics, but there’s a blank-card at the bottom of each one, so that there’s a space shown on the ios app.
I really need to look into css, but I currently have enough trouble working with the jinja templates in HA.
I haven’t tried the template card yet, as I did not have the need for it (yet). But I am guessing that would be your best bet then.
Haha, that is actually funny that you do that with the button card, I did that a while ago with card modder on a markdown card and then make the card fully transparent and just an empty space as text.
I didn’t even consider that it’d be possible to do that with a markdown card. Using the button card it’s just:
- color: black
color_type: blank-card
styles:
card:
- height: 5px
type: 'custom:button-card'
I also used it with in the cards to pad them out and make cards line up evenly.
1 Like
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.
1 Like
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)
6 Likes
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'
1 Like
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
2 Likes
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!