Ripple

The ripple effect provides immediate, clear visual feedback to user interactions (like clicking or tapping). It expands outward from the point of contact.

Composed Utilities

The following utilities establish the DOM structure required for the ripple animation. Because the ripple relies on dynamic coordinates and scaling, JavaScript is required to inject and position the ripple element inside the container on click.

<!-- The parent element must have position: relative -->
<button class="button relative">
  Click Me
  
  <!-- The dedicated ripple container ensures the ripple doesn't overflow -->
  <span class="ripple-container">
    <!-- Injected dynamically via JS on click -->
    <span class="ripple" style="left: 10px; top: 15px; width: 100px; height: 100px;"></span>
  </span>
</button>

• ripple-container: A utility designed to wrap the dynamically generated ripples. It applies absolute inset-0, overflow-hidden, and pointer-events-none so it doesn't block interactions. Crucially, it inherits the border radius (border-radius: inherit) of its parent to ensure the ripple respects rounded corners.
• ripple: The animated element itself. It applies absolute positioning, pointer-events-none, and rounded-full. The background color natively uses currentColor to dynamically match the text color of the parent button or container. The opacity is tied to the --opacity-pressed theme variable.

Animation

The .ripple class relies on a CSS animation (ripple-expand) that scales the element from scale(0) to scale(1) over 0.4s using a standard cubic-bezier(0.2, 0, 0, 1) easing curve.