Yeah, Iād like to possibly use it on the shadows. I was wondering if i could template it with the template card. Havenāt researched it. Hoping there was an easier way.
These are the anchors that Iām currently using for lights and switches:
custom_button_switch_active_glow: &custom_button_switch_active_glow
type: "custom:button-card"
layout: icon_label
show_state: true
show_name: true
show_label: false
styles:
grid:
- grid-template-rows: 30px auto 30px
card:
- border-radius: 15px
- height: 105px
- width: 105px
- margin: 0px 5px 0px 0px
icon:
- align-self: end
- height: 30px
- width: 30px
name:
- justify-self: start
- padding: 0px 10px
- font-size: 13px
label:
- align-self: end
- padding: 1px
- font-size: 11px
- font-weight: bold
- font-family: Helvetica
- text-transform: capitalize
state:
- font-size: 11px
- font-family: Helvetica
- text-transform: capitalize
- font-weight: bold
- align-self: end
- justify-self: start
- padding: 5px 10px
state:
- value: "on"
styles:
card:
- --paper-card-background-color: rgba(40, 40, 40)
- box-shadow: 0px 0px 20px 3px var(--paper-item-icon-active-color)
icon:
- color: var(--paper-item-icon-active-color)
name:
- color: white
state:
- color: white
label:
- color: white
tap_action:
action: toggle
hold_action:
action: more-info
custom_button_light_active_glow: &custom_button_light_active_glow
type: "custom:button-card"
layout: icon_label
show_state: true
show_name: true
show_label: true
styles:
grid:
- grid-template-rows: 30px auto 30px
card:
- border-radius: 15px
- height: 105px
- width: 105px
- margin: 0px 5px 0px 0px
icon:
- align-self: end
- height: 30px
- width: 30px
name:
- justify-self: start
- padding: 0px 10px
- font-size: 13px
label:
- align-self: end
- padding: 1px
- font-size: 11px
- font-weight: bold
- font-family: Helvetica
state:
- font-size: 11px
- font-family: Helvetica
- text-transform: capitalize
- font-weight: bold
- align-self: end
- justify-self: start
- padding: 5px 10px
state:
- value: "on"
styles:
card:
- --paper-card-background-color: rgba(40, 40, 40)
- box-shadow: 0px 0px 20px 3px var(--paper-item-icon-active-color)
icon:
- color: var(--paper-item-icon-active-color)
name:
- color: white
state:
- color: white
label:
- color: white
- value: "off"
styles:
label:
- color: rgba(0, 0, 0, 0.0)
tap_action:
action: toggle
hold_action:
action: more-info
Then to use them you just need to call out the anchor properly and add the missing attributes.
This is an example of a light that turns a group on and off (switch template controls group, label_template counts lights that are on).
- <<: *custom_button_light_active_glow
name: Lights
entity: switch.living_room
icon: mdi:alpha-l-box
label_template: >
var i;
var entities = states['group.living_room'].attributes.entity_id;
var count = 0;
for (i = 0; i < entities.length; i++) {
var state = states[entities[i]].state;
if (state === 'on') {
count += 1;
}
}
return count.toString() + ' of ' + entities.length.toString();
This is a normal dimmer. Nothing too crazy.
- <<: *custom_button_light_active_glow
label_template: >
var bri = Math.round(states['light.living_room'].attributes.brightness / 2.55);
return (bri ? bri : '0') + '%';
name: Light
entity: light.living_room
And this is a switch.
- <<: *custom_button_switch_active_glow
name: Outlet
entity: switch.living_room_window
Anchors make it easy to adjust all your buttons at once and shrink your config from 5k lines to 1k lines. Very useful.
6 Likes
Next version will include this feature 
itās already developed, Iāll release it probably tonight (for me) 
1 Like
Slow down man. Take a coffee break! Thanks for all the work. This card forced me to learn CSS which was on my bucket list. I canāt thank you enough for just that alone.
1 Like
The next release will include a fix for this when there is no state displayed. Youāll have to use layout: icon_name_state2nd.
It was literally 1 line of code 
2 Likes
NEW FEATURES
-
hold_actionnow has a new parameter:repeat(in milliseconds). If set, while you hold the button, the action will repeat itself everyrepeatin milliseconds. Fixes #147
- type: custom:button-card entity: input_number.test show_state: true hold_action: action: call-service repeat: 500 service: input_number.increment service_data: entity_id: input_number.test -
New double click action:
dbltap_action(this introduces a slight delay [250ms] for single click actions on buttons where you also use double tap)
- type: custom:button-card entity: input_number.test show_state: true hold_action: action: call-service repeat: 500 service: input_number.increment service_data: entity_id: input_number.test dbltap_action: action: call-service service: input_number.decrement service_data: entity_id: input_number.test -
styling for the lock, available also per state (Fixes #150)
styles: lock: - color: red - align-items: flex-end - justify-content: flex-start -
You can now use the current light color in your CSS styles. If a light entity is assigned to the button, the CSS variable
--button-card-light-colorwill contain the current light color so that you can use it where you want on your card. Example:
styles: name: color: var(--button-card-light-color) card: - -webkit-box-shadow: 0px 0px 9px 3px var(--button-card-light-color) - box-shadow: 0px 0px 9px 3px var(--button-card-light-color)
FIXES
- Misalignment of label for
layout: icon_name_state2ndwhen there was no state.
8 Likes
The multiple card embedding you have there for the volume slider example is excellent! Itās amazing what you can do with these custom cards - half the trouble is figuring it all out! 
Thanks for sharing @RomRider
You gotta get inventive with combinations. You can come up with some pretty cool cards using vertical-in-stack-card. Itās what makes these card comboās flat
EDIT: I need to replace the uptime w/ this button card to get an icon and some nice styling. Thatās using the built in button-card.
EDIT: Another tip is to make your background and shadow for cards transparent, this anchor will get you that with the card-modder card:
anchor
transparent_background: &transparent_background
type: 'custom:card-modder'
style:
--ha-card-background: "rgba(0, 0, 0, 0.0)"
--ha-card-box-shadow: 'none'
anchor use in environment
# The filter card will filter entities for their state
- <<: *transparent_background
card:
type: ...etc...
6 Likes
Thanks. I must try anchors out when I am brave enough.
Theyāre only hard if you donāt understand data structures in yaml.
This is a pretty good read here:
I started using anchors yesterday based on @petroās (thanks for the tip!) previous posts and I really like what it can do to save space and make it easier to navigate the UI file.
For example, in the same ui-lovelace.yaml file, I have anchors at the start (just after resources), and refer to them throughout that file.
anchors:
custom_button_motion: &custom_button_motion
type: "custom:button-card"
color_type: card
show_name: true
show_icon: true
show_last_changed: true
size: 20px
styles:
label:
- font-size: 10px
card:
- border-radius: 10px
state:
- value: "on"
color: rgb(71,39,45) #Red
icon: mdi:run-fast
styles:
label:
- color: rgb(220,69,121)
icon:
- color: rgb(220,69,121)
- value: "off"
color: rgb(49,68,42) #Green
icon: mdi:run
styles:
label:
- color: rgb(134,219,85)
icon:
- color: rgb(134,219,85)
title: Home
views:
- title: New View
icon: mdi:view-dashboard-variant
panel: false
path: newview
cards:
- type: vertical-stack # Motion
cards:
- type: horizontal-stack # Motion Title
cards:
- type: "custom:button-card"
name: MOTION
styles:
card:
- height: 30px
- padding: 0px 0px
- type: horizontal-stack # Motion Buttons Lvl 1
cards:
- <<: *custom_button_motion # Study
entity: binary_sensor.motion_study_occupancy
name: Study
- <<: *custom_button_motion # Lounge
entity: binary_sensor.motion_sensor_158d0001ad5c5c
name: Lounge
- <<: *custom_button_motion # Kitchen
entity: binary_sensor.motion_sensor_158d0001e43b9f
name: Kitchen
- <<: *custom_button_motion # Downstairs Hall
entity: binary_sensor.motion_hall_downstairs_occupancy
name: D Hall
- <<: *custom_button_motion # Upstairs Hall
entity: binary_sensor.motion_sensor_158d0001ad4ad6
name: U Hall
- type: horizontal-stack # Motion Buttons Lvl 2
cards:
- <<: *custom_button_motion # Garage
entity: binary_sensor.motion_sensor_158d0001ad3413
name: Garage
- <<: *custom_button_motion # Porch
entity: binary_sensor.motion_sensor_158d0001ad3403
name: Porch
- <<: *custom_button_motion # Bed 1
entity: binary_sensor.motion_sensor_158d0001ad33f3
name: Bed 1
- <<: *custom_button_motion # Bed 2
entity: binary_sensor.motion_sensor_158d0001ad698e
name: Bed 2
- <<: *custom_button_motion # Bed 3
entity: binary_sensor.motion_sensor_158d0001ad4a0f
name: Bed 3
@petro Iād love to see the yaml behind your NUC and Switch cards, along with details on the brushed metal background and colour theme there please?
6 Likes
Yes, I will share. Iām rebuilding the interface and sensors for the sole purpose of making a github page for my configuration. I plan to have it posted in the next few days.
1 Like
Is there a code for iframe?
What do you mean?
@RomRider I still have the Alarm_away in my button state. Do I need to change the state to something else? I though you had a fix for it a few versions ago, but there are so many docs about this button that I couldnāt find it that quickly haha.
Argh, yeah it should be fixed (since 1.7.0), but apparently not for alarmā¦ Iāll need to look but I donāt have a alarm to test with 
BTW, why is the first caracter in capital?
Make sure you are using the latest version (not in custom updater but on your disk) and if itās still not working please open an issue on github so that I can trace it. Also post your config if you donāt mind
1 Like
I was just letting @RomRider know that he could easily set one up without having to have a physical alarm
Iām trying to get the ācolor the icon & shadowā working using var(ābutton-card-light-color) and it doesnāt appear to be working for me. These are not rgb lights, they are just normal dimmers.
Iāve tried:
box shadow in the style -> card field w/ var(ābutton-card-light-color)
box shadow in the state -> style -> card field w/ var(ābutton-card-light-color)
-webkit-box-shadow in the style -> card field w/ var(ābutton-card-light-color)
-webkit-box-shadow in the state -> style -> card field w/ var(ābutton-card-light-color)
both in the style -> card field w/ var(ābutton-card-light-color)
both in the state -> style -> card field w/ var(ābutton-card-light-color)
anything special that I need to do to get it to work?
custom_button_light_active_glow: &custom_button_light_active_glow
type: "custom:button-card"
layout: icon_label
color: auto
show_state: true
show_name: true
show_label: true
styles:
grid:
- grid-template-rows: 30px auto 30px
card:
- border-radius: 15px
- height: 105px
- width: 105px
- margin: 5px 5px 0px 0px
icon:
- align-self: end
- height: 30px
- width: 30px
name:
- justify-self: start
- padding: 0px 10px
- font-size: 13px
label:
- align-self: end
- padding: 1px
- font-size: 11px
- font-weight: bold
- font-family: Helvetica
state:
- font-size: 11px
- font-family: Helvetica
- text-transform: capitalize
- font-weight: bold
- align-self: end
- justify-self: start
- padding: 5px 10px
state:
- value: "on"
styles:
card:
- --paper-card-background-color: rgba(40, 40, 40)
- box-shadow: 0px 0px 20px 3px var(--button-card-light-color)
name:
- color: white
state:
- color: white
label:
- color: white
- value: "off"
styles:
label:
- color: rgba(0, 0, 0, 0.0)
tap_action:
action: toggle
hold_action:
action: more-info
EDIT: To me looking through the code, it looks like it should work but I donāt actually see the style in F12.
