Never mind 
Thanks!
Here’s an example from my setup that starts a Watch TV activity on my Harmony Hub. I’m not entirely sure that’s what you’re looking for, but I hope it helps provide a little inspiration.
- type: 'custom:button-card'
icon: 'mdi:television'
color_type: card
show_name: false
entity: sensor.harmony_activity
styles:
card:
- background: 'rgba(255,255,255,0.45)'
- width: 55px
- height: 55px
- border-radius: 50%
icon:
- width: 35px
- color: '#303741'
state:
- value: "Watch TV"
styles:
icon:
- color: 'rgb(255,255,255)'
card:
- background: 'rgb(0,128,0)'
- operator: default
styles:
icon:
- color: '#303741'
tap_action:
action: call-service
service: remote.turn_on
service_data:
entity_id: remote.harmony_hub
activity: "Watch TV"
1 Like
@petro, I’ve found a way to change the ripple effect color, I’ll add this in the next release.
1 Like
awesome, that will be great.
Quick question while I am busy with my layout: can you set like a horizontal stack with 2 columns where the left column is 60% of the screen and the right one 40%? I don’t see that option now, but it would be cool if I could do that.
The reason I’m looking for this is because I want 5 cards next to each other, but a header above the first 3, and then a second header on the last 2 cards.
Check out layout-card. It does exactly what you seek.
Edit: NVM. I went back to the button-card github page and found an example in the documentation. I swear, sometimes CSS+YAML makes my head spin.
You can show me how it looks in practice.
Or… You can also test it yourself on your setup and see the result 
1 Like
so I tried to change my anchors to button_card_template.
custom_button_switch: &custom_button_switch
type: 'custom:button-card'
label_template: >
var id = entity.entity_id.split('.')[1].slice(3, -9);
return states['sensor.' + id + '_actueel'].state + ' Watt';
color: auto
size: 30%
show_state: true
show_label: true
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: success
styles:
card:
- border-radius: 12px
- width: 105px
- height: 105px
- --paper-card-background-color: rgb(255, 251, 239)
name:
- justify-self: start
- padding-left: 3px
- font-weight: bold
- font-family: Helvetica
- font-size: 13px
label:
- color: gray
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
- padding-left: 3px
state:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
- padding-left: 3px
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: start
- margin-left: 10px
and
- <<: *custom_button_switch
entity: switch.sw_audio_auditorium_template
name: Aud. Audio
lock: true
state:
- value: 'on'
icon: 'mdi:music'
# spin: true (uncomment this line for spinning icon)
styles:
name:
- color: black
state:
- color: gray
label:
- color: red
- value: 'off'
icon: 'mdi:music-off'
style:
- opacity: 0.6
styles:
label:
- color: rgba(0, 0, 0, 0.0)
icon:
- color: grey
name:
- color: grey
state:
- color: grey
- value: 'unavailable'
style:
- opacity: 0.4
- color: grey
- --paper-item-icon-color: grey
styles:
label:
- color: rgba(0, 0, 0, 0.0)
showing:
to
button_card_template:
switch:
label_template: >
var id = entity.entity_id.split('.')[1].slice(3, -9);
return states['sensor.' + id + '_actueel'].state + ' Watt';
color: auto
size: 30%
show_state: true
show_label: true
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: success
styles:
card:
- border-radius: 12px
- width: 105px
- height: 105px
- --paper-card-background-color: rgb(255, 251, 239)
name:
- justify-self: start
- padding-left: 3px
- font-weight: bold
- font-family: Helvetica
- font-size: 13px
label:
- color: gray
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
- padding-left: 3px
state:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
- padding-left: 3px
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: start
- margin-left: 10px
and
type: horizontal-stack
cards:
- type: custom:button-card
template: switch
entity: switch.sw_multi_purpose_template
name: Multi purpose
state:
- value: 'on'
icon: 'mdi:toggle-switch'
# spin: true (uncomment this line for spinning icon)
styles:
name:
- color: black
state:
- color: gray
- value: 'off'
icon: 'mdi:toggle-switch-off'
style:
- opacity: 0.6
styles:
label:
- color: rgba(0, 0, 0, 0.0)
icon:
- color: black
name:
- color: black
state:
- color: black
- value: 'unavailable'
style:
- opacity: 0.4
- color: grey
- --paper-item-icon-color: grey
styles:
label:
- color: rgba(0, 0, 0, 0.0)
showing:
what am I doing wrong here, please have a look?
Thanks, this one looks to work only with the actual cards itself, but not inside of a card. I am looking to create below example, but then in 1 or multiple vertical stacked cards. This way I can optimize the screen on phones etc. where I wouldn’t be able to fit for example “Creative Room” and “Bedroom” next to each other when using the automatic setup. I can get the 5 buttons next to each other, but then the headers are not aligned with the buttons.
To make it really agnostic, I’d add an arbitrary attribute to the entity and use the attribute value in the template:
homeassistant:
customize:
light.xxxx:
name_it_like_you_want: sensor.xxxx`
And then your entity light.xxxx will have an attribute name_it_like_you_want with the value 
I’m using quite this trick quite often.
Each room should be:
- vertical stack:
- the header
- horizontal stack:
- button
- button
- …
I must be missing something really obvious here, but in the docs its says to put your templetes “In ui-lovelace.yaml (or in another file using !import )”
What is and how do you use !import?
I have my lovelace config split and use !include for each view and also for my compact custom header config.
I’d like to put all my button templates in a separate file too. What obvious thing have I missed/do I not know about?
Is the below screenshot the expected outcome of the following card config? The card is significantly taller than 2px.
button_card_templates:
horizontal-blank-gap:
styles:
card:
- height: 2px
- type: custom:button-card
template: horizontal-blank-gap
Thanks for this card, great functionality and versatility. Many of us are making remotes so here is one someone can use as a starting point. This one is for Kodi and uses all native methods, so no scripts/automations needed.
Image example:
Template:
button_card_templates:
remote_button_normal:
styles:
icon:
- color: var(--primary-color)
card:
- border-radius: 0px
- opacity: 0.5
remote_button_round:
template: remote_button_normal
styles:
card:
- border-radius: 15px
Remote stack:
cards:
- cards:
- type: 'custom:button-card'
tap_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.ContextMenu
entity_id: media_player.theater
template: remote_button_round
icon: 'mdi:menu-open'
- type: 'custom:button-card'
template: remote_button_round
hold_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.Up
entity_id: media_player.theater
repeat: 100
icon: 'mdi:menu-up-outline'
tap_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.Up
entity_id: media_player.theater
- icon: 'mdi:chevron-double-up'
type: 'custom:button-card'
template: remote_button_round
hold_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.ExecuteAction
entity_id: media_player.theater
action: pageup
repeat: 100
tap_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.ExecuteAction
entity_id: media_player.theater
action: pageup
type: horizontal-stack
- cards:
- icon: 'mdi:menu-left-outline'
type: 'custom:button-card'
template: remote_button_round
tap_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.Left
entity_id: media_player.theater
- icon: 'mdi:alpha-s-circle-outline'
type: 'custom:button-card'
template: remote_button_round
tap_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.Select
entity_id: media_player.theater
- icon: 'mdi:menu-right-outline'
type: 'custom:button-card'
template: remote_button_round
tap_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.Right
entity_id: media_player.theater
type: horizontal-stack
- cards:
- icon: 'mdi:backburger'
type: 'custom:button-card'
template: remote_button_round
tap_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.Back
entity_id: media_player.theater
- icon: 'mdi:menu-down-outline'
type: 'custom:button-card'
template: remote_button_round
hold_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.Down
entity_id: media_player.theater
repeat: 100
tap_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.Down
entity_id: media_player.theater
- icon: 'mdi:chevron-double-down'
type: 'custom:button-card'
template: remote_button_round
hold_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.ExecuteAction
entity_id: media_player.theater
action: pagedown
repeat: 100
tap_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.ExecuteAction
entity_id: media_player.theater
action: pagedown
type: horizontal-stack
- cards:
- icon: 'mdi:chevron-double-left'
type: 'custom:button-card'
template: remote_button_round
tap_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.ExecuteAction
entity_id: media_player.theater
action: stepback
- icon: 'mdi:pause'
type: 'custom:button-card'
template: remote_button_round
tap_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.ExecuteAction
action: playpause
entity_id: media_player.theater
- icon: 'mdi:chevron-double-right'
type: 'custom:button-card'
template: remote_button_round
tap_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.ExecuteAction
action: stepforward
entity_id: media_player.theater
type: horizontal-stack
- cards:
- icon: 'mdi:layers-outline'
type: 'custom:button-card'
template: remote_button_round
tap_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.ExecuteAction
entity_id: media_player.theater
action: fullscreen
- icon: 'mdi:cctv'
type: 'custom:button-card'
template: remote_button_round
tap_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.ShowPlayerProcessInfo
entity_id: media_player.theater
- icon: 'mdi:information-outline'
type: 'custom:button-card'
template: remote_button_round
tap_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.ShowOSD
entity_id: media_player.theater
type: horizontal-stack
type: vertical-stack
1 Like
You’re right, it’s a documentation error, it’s !include.
Add: color_type: blank-card
Ok, I’m definitely missing something. I cannot find a way to have the button card templates in a separate file.
However I do the spacing it either ignores the template or fails entirely and gives the big red box.
I’d like to have all my button templates in one file and then !include it in ui-lovelace.yaml so that it is available for every view which is itself a separate file with an !include.
(I have a feeling this might be something that @Mariusthvdb has done? Or @petro if he is not sticking with his anchors?)
I did that and it works:
button_card_templates:
!include file.yaml
And then in file.yaml:
template1:
[stuff]
template2:
[stuff]
And I also have separate files for each view.