Semi relaistc light cards using Picture entity card

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 :stuck_out_tongue:

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;
  }
1 Like