Editing Openai/66f0882e-055c-8007-b449-397616914d13 (section)

=== Assistant: Thanks for sharing that example! ===
Thanks for sharing that example! Based on your working animation, here’s how to create a similar ripple effect animation like the one from the CodePen you referenced, integrated into the custom:button-card format you've provided:

<syntaxhighlight lang="yaml">type: custom:button-card
entity: fan.cabby_cabby_fan
name: Fan
icon: mdi:fan
aspect_ratio: 1/1
show_state: true
styles:
  card:
* border-radius: 20px
* position: relative
* overflow: hidden
* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5)
extra_styles: |
  :host {
    --ripple-color: rgba(255, 255, 255, 0.5);
  }

  .button-card:active::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    background: var(--ripple-color);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    animation: ripple 0.6s linear forwards;
    z-index: 0;
  }

  @keyframes ripple {
    to {
      transform: translate(-50%, -50%) scale(1);
      opacity: 0;
    }
  }

</syntaxhighlight>

===== - Ripple Effect: The ripple effect is created using a pseudo-element (::after) that scales from the center of the button. =====
* Animation: The @keyframes ripple animation expands the circle and fades it out.
* Styling: You can customize the --ripple-color to match your desired aesthetic.

This setup should give you a nice ripple effect on click. Let me know if you need any further adjustments!