Full size button image. Example

[EliSchleifer]

Love the project. I ended up tweaking my styling to provide a full image toggle button.
There wasn't any existing example. Thought it might be nice to include.

    - type: "custom:button-card"
      entity: switch.jasco_products_14288_duplex_receptacle_switch_4
      show_entity_picture: true
      show_name: false
      show_icon: true
      style:
        - padding: 0px
      styles:
        entity_picture:
          - width: 100%
          - padding-bottom: 0%            
      entity_picture: "/local/images/PatioLightsOff.jpg"
      state:
      - value: 'on'
        entity_picture: "/local/images/PatioLightsOn.jpg"

[RomRider]

Thanks, I'll integrate this into the documentation!

[RomRider]

@EliSchleifer, would you mind sharing a gif of the result please?

[dvbit]

[](url)

316491301_5863465010340922_7178087246146364911_n.mp4

here you go

[jarrah31]

@dvbit Could you share the code and animated gifs behind the video you've shown please? I'd like to do this too. Thanks.

[dcapslock]

@jarrah31 I know this is a bit old, but what I have is the following. This is the animated image. I split it and rotated and adjusted timings. Checking on the allowed usage I am not 100% sure if this can be used for an example. If this can be confirmed, or if we find another confimred royalty free animation, perhaps AI generated, then doco can be updated.

type: custom:button-card
entity: light.bed_light
show_entity_picture: true
show_name: false
show_icon: true
styles:
  card:
    - padding: 0px
  entity_picture:
    - width: 100%
entity_picture: /local/media/off.gif
state:
  - value: "on"
    entity_picture: /local/media/on.gif

Example Dashboard Video

Screen.Recording.2025-08-15.at.12.44.44.pm.mov