button_border.yaml

---
# ______               _
# | ___ \             | |
# | |_/ / ___  _ __ __| | ___ _ __
# | ___ \/ _ \| '__/ _` |/ _ \ '__|
# | |_/ / (_) | | | (_| |  __/ |
# \____/ \___/|_|  \____|\___|_|

# Entity to control
entity: light.example
# Icon to display
icon: "mdi:lamp"
# Button actions
tap_action:
  action: toggle
  haptic: light
hold_action:
  action: more-info
  haptic: medium
styles:
  card:
    # Feel free to change the size here
    - width: min(20vw, 60px)
    - height: min(20vw, 60px)
  icon:
    - color: var(--primary-text-color)
state:
  - value: "on"
    styles:
      card:
        - border-style: solid
        - border-width: 2px
        - border-color: var(--paper-item-icon-active-color)
        - box-shadow: var(--soft-ui-pressed)
      icon:
        - color: var(--paper-item-icon-active-color)
show_icon: true
show_name: false
card_mod:
  class: soft-ui
type: "custom:button-card"