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
is there a way to fix the aspect ratio of the buttons? Lets say I don’t want to set a height or width, but I want the button square. Is this possible?
If you mean the one in the under the alarm panel? It’s basically just surrounding a horizontal-stack card with a vertical-stack-in-card.
cards:
- cards:
- color: auto
entity: binary_sensor.ms_lounge
icon: 'mdi:walk'
name: Lounge
show_last_changed: true
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)
- text-transform: scale(.5)
label:
- font-size: 10px
tap_action:
action: more-info
type: 'custom:button-card'
- color: auto
entity: binary_sensor.ms_kitchen
icon: 'mdi:walk'
name: Kitchen
show_last_changed: true
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)
label:
- font-size: 10px
tap_action:
action: more-info
type: 'custom:button-card'
- action: more_info
color: auto
entity: binary_sensor.ms_bedroom
icon: 'mdi:walk'
name: Bedroom
show_last_changed: true
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)
label:
- font-size: 10px
type: 'custom:button-card'
- color: auto
entity: binary_sensor.ms_bathroom
icon: 'mdi:walk'
name: Bathroom
show_last_changed: true
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)
label:
- font-size: 10px
tap_action:
action: more-info
type: 'custom:button-card'
type: horizontal-stack
type: 'custom:vertical-stack-in-card'That is really great, well the thing is, I have the 2.0 app (latest build) I run the latest ios (12.3) I run the latest HA (0.93.0dev) and I still have this problem. What’s crazy is that it only does it with buttons that are in the “off” state (and only after switching some lights). It might be some other code that is conflicting, will have to sort that out. Or maybe another card that is conflicting like CCH or swipe navigation?
Still great to see my post helped someone.
Edit: I have to mention that all experimental features in Safari are turned on, I don’t know if that impacts the app though, but considering it probably uses the same webkit it could be possible.
Edit2: I turned off all experimental features in safari, so far so good. I do not have the problem (yet). Will report back if it does again though.
Edit3: it still seem to do it although less prominent. I will try removing some unnecessary lines of code as I think I have like 2 vertical-stacks in a vertical-stack etc. or perhaps something else is causing it.
Is you set width and heigth the same size you basically would have a square icon.
Homekit sized buttons for example are 105px both width and height.
Brilliant, thanks, didn’t know about that card
Right, but on a phone vrs a browser the horizontal space is not the same. Especially if you change the shape of the browser. So now on the phone 4 buttons will fill a horizontal row, where on a browser 3 will. I’d like to get it so that 4 buttons are always displayed per row and they are always square. Regardless of who is viewing it. This would require a calculation to be performed on the fly based on the width of the column that the buttons are placed into.
Same configuration 2 different results. height: 90px & width: 90px
phone:
browser:
So in summary, I want a square button that is dynamic in size. I.E. A button that holds to a ratio and does not have a fixed size in pixels.
Weird, I had 4 buttons in a row all the time on my ipad. Though admittedly they weren’t squared like they were on my phone. They got rectangle.
If you style all elements then you would be able to recreate something like this (e.g. give all your elements a width, including the markdown cards). But dynamically is not possible I think.
I’d use the config-template-card for this, it’s quite straightforward and doesn’t require you to duplicate the code like in @jimz011’s solution
That’s not possible I’m afraid. Each element doesn’t know if it has neighbour or not. You have to specify a dimension at least (in px or anything else) else how would it know what size it should be? An aspect ratio of 1/1 is understandable, but based on what fixed size? If I tell you I have a 16/9 TV, you can’t guess its size, you can only say it’s 16/9, maybe it’s 2 inches or maybe 100 inches. But unless I tell you at least one dimension, you can’t figure out what is its real size. CSS is not magical and neither am I 
What I can think about though, is using the @media css feature. But you’d have to inject pure CSS in the config of the card… I’m going to think about this… Basically what you’d say is if my screen width is less than xxx in pixels width then you set one width on the card, else you set another width.
I like what you did on your setup
Why is there a point in the label? Is it because if the string is empty, it doesn’t display the line at all? You can use as the value I think to fix that.
I’m wondering if it’s not because of your - margin: -10px. In the next version, you’ll be able to align the icon and will not need to play with margin and other stuff (see my example here)
Yes I know it was just a test to see what I could make. In that particular screenshot I forgot to make the dot disappear with css (by making it transparent). Yes I wanted it so that the text would be aligned with the other buttons so I needed that line, thanks for the tip I completely forgot how to do that and I couldn’t easily find it on google (this one I mean: ).
My current result looks like this:
But yeah can’t wait til the next update, it will make it a whole lot better I suppose.
@PodPerson I really like your button within button examples, so thank you for sharing! Must admit though, having type at the bottom of each card is a bit of a head scratcher for me! 
looks like if i have for example temperature -4 or -10 none of operators works for me. is there maybe certain way to write value then?
