Time of year for a custom christmas tree button

Share your Projects! Dashboards & Frontend
1

so thought i would share my button for my xmas tree, you need card mod, custom button card and custom brand icons
CPT2211261309-509x504

icon: phu:christmas-tree-v2
aspect_ratio: 1/1
color: auto
name: Tree
tap_action:
  action: toggle
  haptic: light
hold_action:
  action: more-info
  haptic: medium
styles:
  img_cell:
    - justify-content: center
  card:
    - border-radius: 20px
  grid:
    - grid-template-areas: '"i" "n" "s"'
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content
  icon: null
  name:
    - justify-self: start
    - font-weight: bold
    - font-size: 15px
    - padding-left: 15px
  state:
    - justify-self: start
    - font-weight: bold
    - font-size: 15px
    - opacity: 0.6
    - padding: 0 15px 5px
state:
  - value: 'on'
    styles:
      icon:
        - animation: pulse 10s infinite
      card:
        - animation: pulse 10s infinite
extra_styles: |
  @keyframes pulse {
      0% {
         -moz-filter: contrast(96%) linear-gradient(90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 154, 0, 1) 10%, rgba(208, 222, 33, 1) 20%, rgba(79, 220, 74, 1) 30%,
        rgba(63, 218, 216, 1) 40%,
        rgba(47, 201, 226, 1) 50%,
        rgba(28, 127, 238, 1) 60%,
        rgba(95, 21, 242, 1) 70%,
        rgba(186, 12, 248, 1) 80%,
        rgba(251, 7, 217, 1) 90%,
        rgba(255, 0, 0, 1) 100%;);
         filter: contrast(96%) linear-gradient(90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 154, 0, 1) 10%, rgba(208, 222, 33, 1) 20%, rgba(79, 220, 74, 1) 30%,
        rgba(63, 218, 216, 1) 40%,
        rgba(47, 201, 226, 1) 50%,
        rgba(28, 127, 238, 1) 60%,
        rgba(95, 21, 242, 1) 70%,
        rgba(186, 12, 248, 1) 80%,
        rgba(251, 7, 217, 1) 90%,
        rgba(255, 0, 0, 1) 100%;);
      }
      10% {
          -moz-filter: contrast(96%) drop-shadow(3px 3px 10px #0800ff);
          filter: contrast(96%) drop-shadow(3px 3px 15px #0800ff);
      }
      20% {
         -moz-filter: contrast(96%) drop-shadow(3px 3px 10px #fff800);
         filter: contrast(96%) drop-shadow(3px 3px 15px #fff800);
      }
      30% {
          -moz-filter: contrast(96%) drop-shadow(3px 3px 10px #ffbb00);
          filter: contrast(96%) drop-shadow(3px 3px 15px #ffbb00);
      }
      40% {
          -moz-filter: contrast(96%) drop-shadow(3px 3px 10px #00edff);
          filter: contrast(96%) drop-shadow(3px 3px 15px #00edff);
      }
      50% {
        -moz-filter: contrast(96%) drop-shadow(3px 3px 5px #ff00f2);
        filter: contrast(96%) drop-shadow(3px 3px 15px #ff00f2);
      }
      60% {
        -moz-filter: contrast(96%) drop-shadow(3px 3px 5px #FFFF00);
        filter: contrast(96%) drop-shadow(3px 3px 15px #FFFF00);
      }
      70% {
        -moz-filter: contrast(96%) drop-shadow(3px 3px 5px #00FF00);
        filter: contrast(96%) drop-shadow(3px 3px 15px #00FF00);
      }
      80% {
        -moz-filter: contrast(96%) drop-shadow(3px 3px 5px #FFFF00);
        filter: contrast(96%) drop-shadow(3px 3px 15px #FFFF00);
      }
      90% {
        -moz-filter: contrast(96%) drop-shadow(3px 3px 5px #5200ff);
        filter: contrast(96%) drop-shadow(3px 3px 15px #5200ff);
      }
      100% {
        -moz-filter: contrast(96%) drop-shadow(3px 3px 5px #ff0000);
        filter: contrast(96%) drop-shadow(3px 3px 15px #ff0000);
      }
show_state: true
type: custom:button-card

this filter is were you select the colour for the outer glow when pressed

4 Likes