Understandable, there’s a lot going on in this card
1 Like
Just tried to download button.js and it says file not found from here:
Has it been removed?
perfect found it!
Expect lots of questions coming soon, I really want to use this to operate my SkyQ component.
Initial gaps in my knowledge include how to use the button to call a service and can I call a service while having the entity of the button as the media player skyQ, or do I need to create entities for each service I want to call?
Will start having a play.
Love the look of your buttons!
Would you mind sharing the code for one of your light buttons (with slider).
Thanks!
I would be happy too, I’m at work now but I will post later when I’m at my computer.
New to this card and said I would have some questions. I was hoping to get my image to fill the card, its a bigish image so looks like it is being resized / squished within the image cell or grid but I cannot work out how to amend my code to fill out the button.
- type: custom:button-card
show_entity_picture: true
entity: media_player.skyq
entity_picture: /local/images/remote/bbc_one.png
#show_state: true
styles:
card:
- width: 100px
- height: 100px
grid:
# - grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 99px
- grid-template-rows: 99px
img_cell:
- align-self: start
- text-align: start
show_name: false
#size: 100px
#aspect_ratio: 2/1
#tap_action:
color: auto
#size: 90%
action: call-service
service: media_player.select_source
tried commenting out the img cell bits but no difference
button is currently looking like this,
I am hoping to keep the same size button, but have the image fill the grid at least horizontally.
button_card_templates:
homekit_dimmer:
deep_press: true
color_type: icon_label
tap_action:
action: toggle
haptic: heavy
hold_action:
action: more-info
color: auto
color_type: card
show_last_changed: true
show_label: true
show_icon: true
aspect_ratio: 1/1.25
styles:
grid:
- grid-template-areas: '"i" "n" "s" "l" "slider"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content min-content
img_cell:
- justify-content: start
- align-items: start
name:
- justify-self: start
- padding-left: 12px
- font-weight: bold
- text-transform: Titlecase
- font-size: 13px
label:
- font-size: 13px
- padding: 0px 10px
- justify-self: start
icon:
- height: 70%
- background-color: rgb(0,0,0)
state:
- value: 'on'
styles:
card:
- background-color: black
- box-shadow: 0px 0px 12px 2px var(--button-card-light-color)
- color: 255,255,255
icon:
- color: var(--button-card-light-color)
label:
- color: rgb(255,255,255)
- value: 'off'
styles:
card:
- background-color: black
- box-shadow: 0px 0px 12px 2px rgb(255,9,9)
icon:
- color: red
label:
- color: rgb(255,255,255)
- value: 'unavailable'
styles:
card:
- background-color: rgb(0,0,0)
- color: rgb(0,0,0)
icon:
- color: rgb(0,0,0)
label:
- color: rgb(0,0,0)
state:
- color: rgb(0,0,0)
- type: horizontal-stack
cards:
- type: custom:button-card
template: homekit_dimmer
name: Corey's Lamp
tap_action:
action: toggle
icon: 'mdi:lamp'
entity: light.corey
custom_fields:
slider:
card:
type: custom:slider-entity-row
full_row: true
hide_state: true
hide_when_off: true
entity: light.corey
The top one is my template and the bottom one is in my lovelace views.
@RomRider Im sure the code isn’t perfect but it works 
I’m not sure if its possible to template the custom_field or not since it changes depending on the entity_id
I hope this helps you @mcfrojd
2 Likes
Sorry, this is driving me mad. How can I fill the button with the image I have? Is it possible?
You can see here a working config for what you want to achieve:
1 Like
That’s not implemented no… I’d use decluttering-card for now to achieve that.
Could you please open a feature request (template support for embedded cards config) so that I can have a look?
1 Like
Done, I hope I did it right. My first feature request 
Thanks again for everything you do!
Is it possible to set the opacity of an image used in this card?
Is it possible to display the media icon when showing a media player? e.g.
“Living room Display” is currently on and running an internet Stream. When I show the speakers as an entity list, I see their icon:
Here’s the YAML used:
cards:
- entity: media_player.living_room_display
type: 'custom:button-card'
EDIT: Found it, show_entity_picture: true! … It’s not documented anywhere. 
Yes, by using this in the styles of (probably) entity_picture for you:
styles:
entity_picture:
- opacity: 0.5
Did you try show_entity_picture: true?
1 Like
Found it, just before you posted. Thanks!
It’s not documented anywhere on the README. I did a search (after finding it) and only 1 occurrence, a little obscure.
Well, 1 occurence means it is documented as far as I understand how numbers work… Feel free to open a PR with enhancement to the documentation if you think it’s not enough.
2 Likes
Hi All,
What a great plugin, i love it! I’m new and need some help with the template part of the button card.
Probably i’m totally missing something here 
I created a nice button that works like a charm.
- aspect_ratio: 1/1
color: auto
entity: light.living_room_hektar
hold_action:
action: more-info
label: >
[[[ var bri = Math.round(entity.attributes.brightness / 2.55); if
(entity.state === 'on') return (bri ? (bri+"%") : '') ]]]
layout: icon_label
show_label: true
show_state: true
styles:
grid:
- grid-template-areas: '"l s" "i i" "n n"'
- grid-template-rows: 1fr 3fr 1fr
- grid-template-columns: 1fr 1fr
label:
- justify-self: start
- padding-left: 10%
- font-size: 80%
name:
- font-size: 80%
state:
- justify-self: end
- padding-right: 10%
- font-size: 80%
I need to copy this button multiple time so i’d like to use template. To start off I added the following to my configuration.yaml and try to reboot.
button_card_templates:
light_button:
styles:
name:
- font-size: 80%
But i’m getting following error:
Component error: button_card_templates - Integration ‘button_card_templates’ not found.
What am i missing, wrong place to put your button_card_templates or missing module? help! 
I use HASS.io and installed the button card module with HACS
Greetz Niels
The button_card_template code needs to go in your Lovelace file, not config.yaml
I just put it right at the end of my Lovelace code so it’s out of the way