Ofcourse, here you go, I have made some changes though, will try to push them tomorrow.
Iām fairly new, I want to install this in my HA but I donāt have a ui-lovelace.yaml file. the lovelace config file is in the hidden folder and has different structure like below. What is the syntax for adding
resources:
- url: /local/button-card.js
type: module
it to this config file
{
"data": {
"config": {
"title": "Home",
"views": [
{
"badges": [
"device_tracker.iphone_van_an",
"device_tracker.iphone_rohnny",
"sensor.temperature_living_aqara",
"sensor.temperature_slaapkamer",
"sensor.yr_symbol"
],
"cards": [
{
"entities": [You need to edit through the GUI and then select raw editorā¦ then it shows YAML.
Top right 3 dots configureUI
Top right 3 dots raw editor
You also need to take control to do this.
Donāt screw with the hidden json files in an editor.
1 Like
Didnāt find it in the docs. Is it possible to use templates for coloring?
For example color green the button if humidity is within 40-60%?
And yellow red if below that value?
This works for me:
card:
type: custom:button-card
color_type: card
action: service
service:
domain: remote
action: send_command
data:
entity_id: remote.harmony
device: 55198007
command: 'FastForward'
icon: mdi:fast-forward
color: rgb(75, 75, 77)Interestingā¦ looking at the difference with what I tried, Iāll give it a try this wayā¦
What I tried:
- type: "custom:button-card" entity: remote.harmony_salon icon: mdi:volume-plus service: domain: remote action: send_command data: entity_id: remote.harmony_salon device: "60012590" command: "VolumeUp"
Based on yours, mine that doesnāt work has the extra line:
entity: remote.harmony_salon
Well, I have to thank you for this, it works perfectly 
Not sure if itās the entity line I should not put in or the single quotes vs the double quotes but following your example works perfectly with my Harmony commandsā¦ Finally!
Thanks again!
1 Like
you have a git for this this? Specifically looking to see how you made it left justified. using
style:
- font-size: 26px
- text-transform: none
- text-align: left
doesnāt appear to align the text on the left.
EDIT: Found your git. You arenāt using the button so forget this question.
Hihi, no problem. But if you are talking about the Button Card, I do use it 
Yeah, but you are using the markdown card for your labels. I was using the button card as the label row and attempting to get the text to align left, and the CSS wasnāt working. Iām guessing label control is always centered on these buttons, but the markdown card is left justified.
Ah, I understand I use the markdown card indeed. I just started Home Assistant in august and lovelace since January (currently creating an interface for my old ipads with Tileboard). So forgive me if some choices will look weird. But if you havenāt got much knowledge about coding youāll have to come up with other solutions 
I was just perplexed as to why text-align was working for you and not me! Then I found your git and it all made sense. Thanks. I like the look of your button pages. Currently writing a script to make it for me so I donāt have to copy/paste every style change for the cardmodder.
1 Like
Any chance of getting this? Between this and merging the long press action into the master, this tool would do pretty much everything Iāve ever wanted with HA.
I might have missed this in the comments.
Are you saying there is a long press option coming? Iād be happy with just more info, but I did not realize that worked, since I did not see the option in the documentation.
Also, I have a quick question about icon colors. For the normal button card, my lights are blue when off, and yellow (or whatever color) when on. Additionally the color of yellow (or whatever color), changes based on dimmer level. But with this card I get grey and black. Iāve set color: auto, Iād love these buttons to have an option to mimic the color setup of the default button card too. Or am I doing something wrong.
Also, is there a way to set a default size of the button itself. Right now, I have changed the names of many of my entities to make them have the same size button on iOS, but on my computer, the buttons size differently. I get it and understand why, but If there was a way to size the buttons a specific size that would work well.
I have a conditional card setup for my smart lock. Once I add any āshow_stateā or āstateā info, the card disappears from the front end. Without it being conditional, I can have it show the lock as āunlockedā or ālockedā state text. However, itās not a toggle - need it to be a service. So I set it up as conditional. The actual button and service works fine. But i want it to show the state, and edit the state color depending on state - once I add those, the icon just disappears.
- cards:
- color: 'rgb(107, 181, 255)'
entity: binary_sensor.motion_sensor_158d00026e0bf6
icon: 'mdi:access-point'
name: Kitchen Motion
type: 'custom:button-card'
- color: 'rgb(107, 181, 255)'
entity: cover.garage_door_opener
icon: 'mdi:garage'
name: Garage
type: 'custom:button-card'
show_state: true
state:
- value: open
color: 'rgb(255, 21, 0)'
- type: conditional
conditions:
- entity: lock.kwikset_touchpad_electronic_deadbolt_locked_6
state: locked
card:
type: 'custom:button-card'
action: service
service:
domain: lock
action: unlock
data:
entity_id: lock.kwikset_touchpad_electronic_deadbolt_locked_6
card_style: ''
color_type: icon
default_color: 'rgb(107, 181, 255)'
icon: 'mdi:lock-smart'
name: Front Door
- type: conditional
conditions:
- entity: lock.kwikset_touchpad_electronic_deadbolt_locked_6
state: 'unlocked'
card:
type: 'custom:button-card'
action: service
service:
domain: lock
action: lock
data:
entity_id: lock.kwikset_touchpad_electronic_deadbolt_locked_6
icon: 'mdi:lock-smart'
name: Front Door
type: horizontal-stackLopton came up with a decent solution, but it still needs some work. When kuuji initially made this, lovelace didnāt support long press functionality but has since implemented it in the core.
As to the color question: youāre not doing anything wrong. It doesnāt support or mimic the standard card button by dimming the icon based on the level of the light entity. Per the docs, ācolor: autoā just sets the color of the button based on the actual color of the light (so, for RGB lights, if your light is set to the color red, the button would be red).
To your last question, you can add CSS to each button, so have you tried just defining a static height for the button? Thatās how I implement and it works pretty well cross-browser.
Thanks, this is all great info. Iāll check out the long press code. As far as color goes, thanks for the info. That would be a nice option for future, maybe its a lot of work though, so no worries if not.
Iām not smart on css yet., but looks like Iāll have to figure it out. Would you be willing to post a quick example of the css Iād need to add for a button height/width, and if youāre feeling really generous, and example of the button card with the code included??
Thanks again!
Sure. Hereās a sample from my config with some CSS settings I have:
- entity: light.living_room
type: "custom:button-card"
icon: mdi:lamp
name: Living Room
color: rgb(3, 169, 244)
color_off: rgb(0, 0, 0)
color_type: card
size: 80%
show_state: false
style:
- line-height: 20pt
- font-size: 10pt
- font-family: -apple-system, Roboto Sans
- font-weight: bold
- margin-bottom: 0px
- text-transform: none
- padding-bottom: 5px
- padding-top: 5px
- border: 1px solid rgb(100, 100, 100)
- color: white
- height: 50px
Basically, you set the height of the box itself to be a static height across entities in the row (and thus not dependent and fluid on the size of the icon/state/etc. in the button) and use padding to center the content inside the box.
1 Like
Why is your ācolor:ā option wrapped in single quotes? Also, whatās the ādefault_color;ā option?
quotes donāt matter in that context. He probably does it out of habit. The only reason quotes may be need in yaml is if you want the parser to treat the field as a string. Sometimes this is needed especially if the field starts with a special character like [ or { because the parser will think itās more yaml instead of text.
as for default color, it isnāt in the docs but the 4th example showās itās use: