Hi, Naviato, I just follow the standard custom button card layout template. Code is illustrated by Kerith, I am not an expert fot it
What do the small icons in the top left and right do? How are those buttons coded? (I’ve got some similar (I think) buttons in my set-up but I’m not sure.
The Top left icon, I want to show controlled senatio, motion-sensor controlled, Zone control or scene control. Right icon is simple animation of toggle, although it could be made pressable, but I think it is too small. now it animated with the light on-off. The reason for the top right coner icon is I think it might looks more balanced with icon on each side.
Agreed. It does help to balance out the button.
I’m using the upper corners for an entirely different purpose. For example, I have an outside hose bib that I can turn on and off. The normal automation allows it to be turned on for two hours, but I also have a click-and-hold function that locks it on until I turn it off. The main icon shows the status of the bib and the corner icon shows the lock status. I also have a yard light and a motion detector pointed at the yard. I use the tap-and-hold to toggle motion detection control, but I can also turn the light on and off manually. (So, if we’re out on the patio, I turn the light one manually, but I also have an automation that turns the motion detection on a dusk and off at dawn and another that turns the light off manually if it’s on after 11:30 pm.) The main icon shows the light and the corner icon shows the motion detection control status.
is it not possible to run the “input_button” helper via a tap_action?
type: custom:button-card
entity: input_button.advetskalender
show_icon: true
aspect_ratio: 1/1
name: Adventskalender
show_state: false
template:
- button
What do you want your input_button to do?
type: custom:button-card
entity: input_button.test
name: Test
icon: mdi:test-tube
tap_action:
action: more-info
...
or
tap_action:
action: navigate
navigation_path: /lovelace-prov/...
or something else?
Hello everybody,
I’m new to HA and recently discovered button-card. I created my first configuration to manage the remote control of my Emotiva processor with Broadlink. The problem is that the commands are not sent. This is the button configuration:
- type: horizontal-stack
cards:
- type: custom:button-card
color_type: card
color: rgb(66, 134, 244)
icon: mdi:power-off
show_icon: true
name: POWER OFF
show_name: false
styles:
card:
- width: 95px
- height: 50px
tap_action:
action: call-service
service: script.emotiva_on
If I launch the same script from a normal HA button it works fine. Where am I doing wrong? Thank you.
This works for me:
type: grid
cards:
- type: custom:button-card
entity: script.spela_p3
name: P3
icon: mdi:radio
tap_action:
action: call-service
service: script.spela_p3
show_state: false
styles:
card:
- border-radius: 5%
- filter: opacity(75%)
- height: 50px
icon:
- color: white
name:
- font-size: 15px
- color: white
It is just arranged a little different
Ok, with the add of entity all works. Thank’s
hello
I was wondering which button model are the most beautiful for my dashboard because the base button isn’t beautiful for me
I recently updated from 2022.10 to 2022.12 and the “auto” color doesn’t work like it used to. I used to get a filled in yellow card and the amount based on how bright or dim my switch was. Now it just defaults to the background color and doesn’t fill in based on bright/dim.
Code:
living_room_light_button:
name: Living Room
entity: light.living_room_light
icon: mdi:sofa
color: auto
color_type: card
The living room button used to be yellow instead of the background color when it was on:
Any fixes/tips? If I made the color: yellow it won’t dim/brighten the button state based on the switch.
Same happened to me… auto colors are wonky now.
2022.12 has a big chance to color behavior from what I’ve read. I haven’t updated to it yet. The custom button card may need a fix to account for that, but I’m just guessing. I personally don’t have any buttons using auto to test with.
Here is what works for me until the author fixes auto colors:
name: Light
entity: light.light
color: rgb(253, 215, 54) # this was the color it used to highlight in the last version
color_type: card
state:
- value: 'on'
styles:
card:
- filter: |
[[[
let x = Math.round(states['light.light'].attributes.brightness / 2.55) * 0.5 + 50;
return "brightness(" + x + "%)";
]]]
I used the brightness filter option, but found that using the scale of 1-100% it was too dark at 1%. I rescaled it to use 50-100% instead (hence the math in there).
For instance…
Light at 100% will display button brightness of 100%
Light at 50% will display button brightness of 75%
Light at 1% will display button brightness of 50%
… and everything in between …
With the change in HA 2022.12.X I have lost my active state color of my icon. I have read the Github issue
https://github.com/custom-cards/button-card/issues/635
and the solution by pejotigrek and after adding the changes to my resources and in my community I see no changes. The difference between on and off is hard to see.
My card is:
- cards:
- entity: switch.tasmota1_ds
icon: 'mdi:lamp'
name: DS_light-test
show_state: true
styles:
card:
- width: 80px
- height: 100px
color: 'rgb(28, 128, 199)'
state:
- color: 'rgb(255, 0, 0)'
value: 'off'
tap_action:
action: toggle
type: 'custom:button-card'
Any ideas on what I am doing wrong?
Hi.
In my templates for custom:button-card I have the color without the quotes like
color: rgb(0, 255, 0)
and the value might be case sensitive?
Armin
Thanks, Trying this I see my code only changes the test color. Not the Icon color. It must be set somewhere else (old default)? Anyway, not sure how to fix this easily. Maybe in a template? Not sure how to use the button card template as the only ones I have used were copies from this forum and I really never learned how to use them my self.
You would need to select the icon div in the styles part.
- entity: switch.tasmota1_ds
icon: 'mdi:lamp'
name: DS_light-test
show_state: true
styles:
card:
- width: 80px
- height: 100px
icon:
- color: 'rgb(28, 128, 199)'
state:
- styles:
icon:
- color: 'rgb(255, 0, 0)'
value: 'off'
tap_action:
action: toggle
type: 'custom:button-card'I do not see icon div in the readme. I just want it to go back to yellow for on.
