So I wanted to create realistic looking buttons (or should I say I was messing around with them lol) these are just testers though., requires card mod and custom button card.
realastic buttons for home assistant - YouTube (22 seconds long show how they look with color changes) there is another rather long winded 8 minute video explaining how to make one for your light on the channel, no dull voice just text over video
code to use for them
type: picture-elements
image: #<- your first base image goes here including location so /local/folder/image name.png
show_icon: false
elements:
- type: custom:button-card
entity: light.back_bedroom_bulb #<--your light entity
show_icon: false
entity_picture: #<- your cut out image location goes here
show_entity_picture: true
color: auto
show_name: false
style:
top: 50%
left: 50%
width: 100%
name: Back bedroom
tap_action:
action: toggle
haptic: medium
hold_action:
action: more-info
haptic: medium
styles:
card:
- border-width: 0px
- border-color: '#FF0000'
- background-color: transparent
icon:
- width: 100%
grid:
- grid-template-areas: '"i" "n"'
- grid-template-columns: 1fr
state:
- value: 'on'
styles:
icon:
- filter: >-
drop-shadow(0px 100px 150px var(--button-card-light-color))
drop-shadow(0px 100px 25px var(--button-card-light-color))
drop-shadow(0px 100px 35px var(--button-card-light-color))
drop-shadow(0px 100px 50px var(--button-card-light-color))
card:
- filter: null
style: |
ha-card {
box-shadow: none;
}