have a look at this:
1 Like
Hi @kuuji
Thanks for the great work, this is super useful!
Just wondering, is it possible to add a feature to remove the border for the button/card?
Hey there! Thank you a lot, this is nice. Could you say, how can I make buttons smaller?
Here is what I have:
- type: custom:button-card
entity: switch.wall_switch_left_158d000245c5ca
icon: mdi:lightbulb-on-outline
name: 'Коридор'
color: '#00abfb'
size: 20%Is it possible to have a button where the background color is red if the sensor im using have the state “Occupied” and green background if the state is “Vacant”.
Do i have to write some kind of template for that?
you’ll have to modify the .js for that
check the class: “buildCssColorAttribute”
I’d also like to color a button which represents a thermostat, so the state is “heat”, and not “on”.
2 Likes
This is a great custom card. I love it and used it in a lot of my lovelace views. Thank you!
There is one great enhancement which would make the button card more powerful. Could you implement a long press option like @thomasloven did for picture elements? (My Lovelace Plugins) This would be great!
1 Like
@kuuji would it be possible to implement templating support for the icon. If not could you add state icons for on and off?
Anyone tries useing mdi:numeric-1 ? It’s not working for me.
Asking because text buttons and icon buttons are not the same size.
Haven’t found an answer to this yet, in ‘Tiles’ I had a button that the colour reflected the on or off state of one sensor but was bound to a diffferent entity so pressing it for more_info brought up the relevant window for that, looked like this…
- entity: sensor.hot_water_state
icon: mdi:water
label: " Water"
more_info: climate.hot_water
It needs to work like this as the climate entity state is nearly always ‘AUTO’ whereas the sensor states whether it is actually on or off at the time. Anyone done it in a button card yet?
1 Like
Hi there,
I’m just starting to have a play with Lovelace and the custom-cards in particular. Really like it!!
I’m trying to get my cards to be transparent. Is this possible?
This is my code, but it doesn’t seem to be picking up the alpha part of the RGB value.
Any ideas?
- type: "custom:button-card"
color_type: card
color: rgba(51, 72, 111, 0.24)
entity: script.good_morning
icon: mdi:weather-sunset-up
name: "Good Morning"
action: more_info
show_state: true
style:
- text-transform: none
- color: rgb(28, 128, 199)
- font-weight: boldDid you find out how to make the buttons smaller?
Unfortunately no. Have no idea what am I doing wrong. Will come back and try again some days later.
Please, let me know if you find the issue.
Just worked it out - you have to put the buttons within a vertical or horizontal stack.
See this example:
- title: Experimental
icon: mdi:test-tube
background: center / cover no-repeat url("/local/bg3.jpg") fixed
cards:
- type: horizontal-stack
cards:
- type: "custom:button-card"
color_type: card
color: rgba(51, 72, 111, 0.24)
entity: script.good_morning
icon: mdi:weather-sunset-up
name: "Good Morning"
action: more_info
show_state: true
style:
- text-transform: none
- color: rgb(7, 57, 66)
- font-weight: bold
- type: "custom:button-card"
color_type: card
color: rgba(51, 72, 111, 0.24)
entity: script.home_mode__day
icon: mdi:weather-sunset-down
name: "Dusk Lighting"
action: more_info
show_state: true
style:
- text-transform: none
- color: rgb(7, 57, 66)
- font-weight: bold
- type: "custom:button-card"
color_type: card
color: rgba(51, 72, 111, 0.24)
entity: script.night_night
icon: mdi:bed-empty
name: "Night Night"
action: more_info
show_state: true
style:
- text-transform: none
- color: rgb(7, 57, 66)
- font-weight: bold
1 Like
Is anyone using lovelace with ‘Fully Kiosk Browser’?
I’m trying this out, but the custom card .js files don’t seem to be loading. It works on the same device with Chrome.
Is there any method, where after clicking on the button, next button are shown underneath?
Example, after clicking “living room” button, underneath i have buttons from light switches, info from all sensors?
You could do this with the conditional card I think. Take a look at this:
I’d love to use this card with Lovelace but I’m a bit concerned that @kuuji hasn’t been seen on here or updated the code for the past 30 days. Is this our only way to implement buttons using Lovelace? It would be nice if this was a default UI feature as buttons work and feel so much better as an interface to my HA entities (I’m a big fan of Custom UI: Tiles but it’s a huge shame that @eddi89 deleted the github repo). 
Great Custom Card!
I’m trying to use this to select an option but can’t get it to work really. Have been trying for a while now so reaching out for help:
- title: light
icon: mdi:lightbulb-on-outline
cards:- type: “custom:button-card”
icon: mdi:circle-slice-1
action: service
service:
domain: input_select
action: select_option
data:
entity_id: input_select.light_scene
option: Kväll
- type: “custom:button-card”
Error: You need to define entity
Have also tried this:
- title: light
icon: mdi:lightbulb-on-outline
cards:- type: “custom:button-card”
icon: mdi:circle-slice-1
entity: input_select.light_scene
action: service
service:
domain: input_select
action: select_option
data:
option: Kväll
- type: “custom:button-card”
No error - no action
Hey y’all!
Sorry I’ve been away for a while. I’ve been pretty busy during the past few weeks with work, friends visiting from abroad and I got sick pretty bad 2 weeks ago. But things are looking better now and I started to look at the backlog.
@arsaboo I’ll look into opening a PR to the official repo and I’ll probably include a release with some new features at the same time.
Cheers!