That’s something I’m trying to fix with the layout currently, but for now you have to specify size: 10% for this to work (play with the number, it has to be a percentage, not in px). The icon doesn’t scale as expected when you specify a card height (yet… 
)
And also, reduce the padding of the card:
styles:
card:
- padding: 5px 0px
I’m working on many layouts issues currently… and CSS is driving me crazy 
Thanks. In the meanwhile have we lost the ability to do a simple colored card? This is giving me a white card:
For that matter, shouldn’t colors be specified in styles now?
The color option is applied for on state only (the doc says it ;)).
If you want it applied all the time use:
state:
- operator: default
color: your color
You can of course override the color in styles also, but I won’t deprecate it as everyone uses it!
Thanks for these updates, I finally found some time to work on this. Now I have two questions:
I’d love to make something similar to Apple’s Homekit buttons.
I use this code to show the brightness in 0-100% scale.
label_template: >
var bri = Math.round(states['light.your_light_here'].attributes.brightness / 2.55);
return (bri ? bri : '0') + '%';
As I can’t cope with all the specific layout requests, I’ve now allowed to design your own layout in the next release… but it’s advanced CSS stuff… 
You’ll have to learn a bit about css grids to achieve that.
This card is getting really complex 
For example state and label on the same line:
- type: custom:button-card
entity: switch.skylight
name: Label and State Same line
icon: mdi:fire
color_type: card
show_state: true
show_label: true
label: label
styles:
grid:
- grid-template-areas: '"i i" "n n" "s l"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content
state:
- justify-self: start
- padding-left: 10px
label:
- justify-self: end
- padding-right: 10px
For the Apple Homekit like button:
- type: custom:button-card
entity: switch.skylight
name: <3 Apple
icon: mdi:fire
color_type: card
show_state: true
styles:
card:
- width: 100px
- height: 100px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: start
- text-align: start
name:
- justify-self: start
- padding-left: 10px
- font-weight: bold
- text-transform: lowercase
state:
- justify-self: start
- padding-left: 10px
state:
- value: 'off'
styles:
card:
- filter: opacity(50%)
icon:
- filter: grayscale(100%)
Note that this is not yet available, it’s on my dev environment 
HI!
now that this card is really getting a lot of traction (so cool) please let me ask if I can do this for a button entity_picture template. It is what I am using in my current (regular Ha) Tiles cards, and havent seen possible in any other card yet (I think).
If this would be possible Id jump on the button-card wagon within seconds…
- entity: device_tracker.life360_name
style_template: >
if (state === 'home' || state === 'not_home') return 'background-image: url(\"/local/tiles/family/name_' + state + '.png\")';
return 'background-color: #643aac;background-image: url(\"/local/tiles/family/name_' + entities['sensor.name_location_picture'].state + '.png\")';
more_info: group.name
little explanation:
it shows home or not home when the device_tracker is either home/not_home (duh…) or shows a picture based on the zoning of the device_tracker when not being home/not_home.
Having spend some tome trying to read all the thread and your documentation didn’t reveal the possibly yet 100% for me, so please forgive me asking before trying.
@RomRider, it sounds like this might already be in progress with some of the other style/layout work you’re doing, but wanted to run this question by you just in case it’s not (or if there’s already a way I’m not realizing to do what I want to do).
My priority has been to set up my Lovelace config for the scenario I’m using it for most, on a phone in portrait mode. However, ideally I’d still like for the same view to look nice in landscape orientation, or on my PC.
One thing I did was set the pixel width of the button cards and put a blank card on each side, to give the buttons just a little more room to breathe instead of having them stretch to the edge of the screen:
However, in landscape mode, since the width of the buttons is fixed, it doesn’t look very good:
I tried setting the size on the blank cards and letting the actual buttons auto-size, but the blank cards did not appear to honor the sizing. I also tried adjusting margin/padding on the cards but the cards don’t adjust size to fit the page width when that’s done so that did not work either. Anything I am missing that I can try?
Holy, that is so awesome. I have just little experience with CSS, but a 9 months ago I did not have any experience with Home Assistant/python/yaml/java at all so I think I’ll manage.
This card is really getting advanced, I wonder if it won’t affect performance though 
Great work!!
Putting the width on both of the blank card and not on the actual button where you have information to display is what you should do, on my side it works so can you share your config please?
My dev view has like 100 buttons on the same page, it’s a bit laggy on my computer but that because they are all linked to the same entity, so it updates 100 buttons in one time (takes 1sec to update). On my phone though, it’s super super fast with the same 100 buttons!
Checked it again and got it to work! I think I just missed a dash in the YAML last time I tried it. 
Looks great now, thanks for the help!
I think you could achieve this by using a state-switch-card and picture-elements. Then make the card show something else when the state of a certain device changes.
You could use a state-switch card within a state-switch card so that you could make it not only change per device state, but also per user.
For example, it will only show user B another card when user B’s device is not_home. But it won’t change for user A. You can put as many state switch cards in as you want, which I use a lot for showing lovelace cards as notification bubbles. (Will post my code later, when I have access to a computer)
For this kind of setup you don’t need this button-card though.
Thanks a lot, it worked!
Hey! Ive made several input_select groups to control my portable AC. When triggering the scripts manually from HA, they work fine. However, when using button-card with “more-info”, I can choose settings, but nothing happens. Any ideas?
I don’t understand what you expect.
Can you share your config please?
Sure!
My problem is that the AC remote sends the entire command set each time. So I had to capture every temperature input with fan mode low/med/high. I need the dropdown menu to handle that many.
The more-info is not linked to the button-card. What happens inside is managed by Home Assistant directly.
If you put your input-select entity in an entity-card, does it work? If not, the problem is in your input-select.
Ok, I will test that and report back later, thanks
