@RomRider @Prathik_Gopal do you have the radial-menu element? by chance? I’m thinking we’re going to have to define long-press-button-card differently @RomRider, I ran into this with adding it to the aftership-card and renamed it as such here, and have it on my list to look into it more.
Yes your absolutely right I did have the radial menu , commented it out since it was the last thing I added before it broke . And I think it’s working now even after a reboot.
quick fix should be to do a find replace in the radial-menu js file for ‘long-press-button-card’ to ‘long-press-radial-card’
1 Like
Currently I can’t think of something, I’m going to look into that soon. The horizontal layout is not optimal yet, I have some similar problems also 
1 Like
Any chance you could share how you got the “hours/minutes ago” bit to show? I don’t know javascript and while I’ve managed to get them to show up like “2019-05-05T02:15:19.227630+00:00” I can’t convince it to change format. I know I how to create a sensor for each showing relative time, but am trying to avoid creating so many more sensors.
show_last_changed: true will do that
Some how I missed that option. I thought rsachoc was using a label template. Thank you!
I’m glad it’s not just me so i’ll raise an issue for it. Thanks!
@RomRider
Hello again RomRider I dont know if I am stupid or what… Everything works fine on my computer using FF but when I use Chrome on my phone I get this problem.
Every time I hit an button that is a link it will turns a little bit darker all the time, like its something with a:visited or something. When I reload the page it goes back… Any idea? 
The code is like this:
- type: "custom:button-card"
color_type: card
color: white
tap_action:
action: navigate
navigation_path: /lovelace/1
name: Kitchen
icon: mdi:food-fork-drink
size: 40px
styles:
name:
- text-transform: none
- font-size: 14px
- font-weight: normalI didn’t check the navigate action on my phone, I’ll have a look, it’s probably a side effect. Please raise an issue on github so that I can track it. Thanks 
1 Like
Consider it done!
Why does vertical spacing change when a card is at max width? These cards look fine when the screen is wide enough for two columns and therefore each column is narrower, But narrow the screen to one column (at its widest), and the labels start to disappear. Narrow it further and they come back.
It seems there is some kind of native percentage padding at work. I’ve specified for the button to have no padding and even smaller fonts, but this still happens.
- type: 'custom:button-card'
color_type: icon
entity: switch.output_033
name: Mute
size: 30px
show_icon: true
show_name: true
styles:
card:
- height: 80pxThat’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
6 Likes
Thanks. In the meanwhile have we lost the ability to do a simple colored card? This is giving me a white card:
- type: ‘custom:button-card’
color_type: card
color: rgb(223, 0, 97)
entity: switch.output_033
name: Mute
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:
- Would it be possible to have the state and the label on the same line (whilst the name stays on top of that). For example state justifies at the start and label justifies at the end? And would it be possible to have the name above the icon and/or have the icon be aligned to the left/right?
I’d love to make something similar to Apple’s Homekit buttons.
- I used the code from the docs to make the brightness appear in the label. However, it shows values up to 255%, is there a way to make it scale to a 100% so that it is more logical to the human mind?
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') + '%';
2 Likes
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 
1 Like