Ripple button

<div class="ripple-row">
  <button class="ripple" type="button">Click anywhere on me</button>
  <button class="ripple ripple-outline" type="button">Or try the keyboard</button>
</div>

.ripple-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

.ripple {
  --ripple-color: rgba(255, 255, 255, 0.55);
  position: relative;
  overflow: hidden;          /* keeps the ripple inside the button's rounded corners */
  border: 0;
  cursor: pointer;
  padding: 15px 26px;
  border-radius: 12px;
  font: 600 15px system-ui, sans-serif;
  color: #fff;
  background: var(--brand);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease;
}
.ripple:active { transform: scale(0.97); }  /* a small press-in, so it feels physical */
.ripple-outline {
  --ripple-color: color-mix(in srgb, var(--brand) 35%, transparent);
  color: var(--fg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.ripple:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* One ripple: a circle that grows from a dot to cover the button, then fades. */
.ripple-wave {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: var(--ripple-color);
  transform: scale(0);
  animation: rippleGrow 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes rippleGrow {
  60% { opacity: 1; }
  to { transform: scale(1); opacity: 0; }
}

/* Reduced motion: same ripple, just quicker. */
@media (prefers-reduced-motion: reduce) {
  .ripple-wave { animation-duration: 0.35s; }
  .ripple:active { transform: none; }
}

// Ripple button: on press, add a circle centered on the press point that
// grows until it covers the whole button, then remove it.

function addRipple(button, x, y) {
  const box = button.getBoundingClientRect();

  // The circle must reach the farthest corner, so its radius is the distance
  // from the press point to that corner.
  const radius = Math.hypot(Math.max(x, box.width - x), Math.max(y, box.height - y));

  const wave = document.createElement('span');
  wave.className = 'ripple-wave';
  wave.style.width = wave.style.height = `${radius * 2}px`;
  wave.style.left = `${x - radius}px`;
  wave.style.top = `${y - radius}px`;

  button.append(wave);
  wave.addEventListener('animationend', () => wave.remove());
}

document.querySelectorAll('.ripple').forEach((button) => {
  // Mouse, pen and touch: start where the pointer went down.
  button.addEventListener('pointerdown', (event) => {
    const box = button.getBoundingClientRect();
    addRipple(button, event.clientX - box.left, event.clientY - box.top);
  });

  // Keyboard (Enter or Space): there's no press point, so start from the center.
  button.addEventListener('keydown', (event) => {
    if ((event.key === 'Enter' || event.key === ' ') && !event.repeat) {
      addRipple(button, button.offsetWidth / 2, button.offsetHeight / 2);
    }
  });
});