I have made a mod, similar to card-mod which allows 3D touch to be used on cards in Lovelace.
Makes for a great Apple Home-like experience! See the post here.
2 Likes
Just like this:
styles:
card:
- box-shadow: unset
- background-color: unset
Thanks, that was easy!
Nice, I was currently handling this with a markdown card and template sensors. This looks cool.
I started with markdown but soon figured it was going to get tedious…well more tedious 
Exactly, will give it a try.
Hi All,
I am trying to implement an occupancy display using the custom button card. I have started out with a template from petro31 git as the basis and have produced the below code.
I have set an entity_picture: as the default background and then via the state: value “off” and I am trying to apply a grayscale filter. I have searched throught this thread and seen mutiple examples, and also taken note of the breaking change back in 1.5 - but I just cant get this working !!!
can someone please have a look at my code and check to see if there is anything obvious that i have missed.
- type: custom:button-card
color: auto
show_state: true
show_name: true
show_label: true
show_entity_picture: true
entity: input_boolean.home.occupancy
entity_picture: /local/picture.jpg
styles:
entity_picture:
- width: 100%
- padding-bottom: 0%
card:
- height: 80px
- width: 80px
- border-radius: 15px
- margin: 8px 0px 0px 0px
- padding: 0px
name:
- justify-self: start
- align-self: start
- padding: 0px 0px
- font-size: 15px
- font-weight: bold
- color: white
label:
- font-size: 11px
- font-family: Helvetica
- text-transform: capitalize
- font-weight: bold
- align-self: end
- justify-self: start
- padding: 9px 10px
state:
- font-size: 11px
- font-family: Helvetica
- text-transform: capitalize
- font-weight: bold
- align-self: end
- justify-self: start
- padding: 9px 10px
lock:
- align-items: flex-end
state:
- value: "off"
entity_picture:
- filter: grayscale(100%)
You’re missing styles:
state:
- value: "off"
styles:
entity_picture:
- filter: grayscale(100%)
nope still doesnt work 
- type: custom:button-card
color: auto
show_state: true
show_name: true
show_label: true
show_entity_picture: true
entity: input_boolean.home.occupancy
entity_picture: /local/picture.jpg
styles:
entity_picture:
- width: 100%
- padding-bottom: 0%
card:
- height: 80px
- width: 80px
- border-radius: 15px
- margin: 8px 0px 0px 0px
- padding: 0px
name:
- justify-self: start
- align-self: start
- padding: 0px 0px
- font-size: 15px
- font-weight: bold
- color: white
label:
- font-size: 11px
- font-family: Helvetica
- text-transform: capitalize
- font-weight: bold
- align-self: end
- justify-self: start
- padding: 9px 10px
state:
- font-size: 11px
- font-family: Helvetica
- text-transform: capitalize
- font-weight: bold
- align-self: end
- justify-self: start
- padding: 9px 10px
lock:
- align-items: flex-end
state:
- value: "off"
styles:
entity_picture:
- filter: grayscale(100%)
Your entity looks wrong also… Maybe the second dot should be an underscore? 
entity: input_boolean.home.occupancy
winner winner chicken dinner!!! 
your the man romrider 
Took a little time tonight and finished my summary card
I haven’t cleaned it up at all and probably won’t as @RomRider just released some breaking changes and I’m actually just going to use notification indicators to highlight areas that are active and their counts instead. The summary text got to be a bit much. Regardless, here’s the gross configuration
Preview of notification button view. Still a WIP
6 Likes
Ooh, those notification buttons are looking slick.
Not yet released, but it’s a small breaking change 
You’ll be able to leverage the new custom_fields feature for that 
1 Like
Right now it is some wonky CSS 
Hey folks, working on this currently, feedback welcome of course:
https://github.com/custom-cards/button-card/pull/199
I’ll release it probably next week, some more tweaking to do
1 Like
Looks awesome, and worth the changes I’ll have to make to my buttons to open up lots more possibilities going forward! Glad I’ve been learning CSS Grid lately. 
WOW!
This is exactly what I was looking for!
I was looking for a way to change the “tap_action” from “call_service” to “none” based on specific entity status.
I have a sensor for which all of the statuses I am calling a service to do something, except for its one specific status for which I need to disable the button from being able to be pressed, basically to do nothing.
Is there a way to specify height based on the automatic calcuation done by how many buttons there are?
ie. I have a 3 button row, but I want the height to be the same as the row with 5 buttons? It can be specified as a pixel value, but was not sure if there was another option. I tried explaining in more detail here: Older post with more detail.
The layout card solution created some weird padding issues…
Height as pixel is what you are looking for. No other option I can think of.