Pointer-origin ripple

<button class="ripple-button" type="button">Continue</button>

<script>
  const button = document.querySelector('.ripple-button');
  function ripple(x, y) {
    if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    const size = Math.hypot(button.clientWidth, button.clientHeight) * 2;
    const circle = document.createElement('span');
    circle.className = 'ripple';
    circle.setAttribute('aria-hidden', 'true');
    Object.assign(circle.style, {
      width: size + 'px',
      height: size + 'px',
      left: x - size / 2 + 'px',
      top: y - size / 2 + 'px',
    });
    circle.addEventListener('animationend', () => circle.remove(), {
      once: true,
    });
    button.append(circle);
  }
  button.addEventListener('pointerdown', (event) => {
    const rect = button.getBoundingClientRect();
    ripple(event.clientX - rect.left, event.clientY - rect.top);
  });
  button.addEventListener('click', (event) => {
    if (event.detail === 0)
      ripple(button.clientWidth / 2, button.clientHeight / 2);
  });
</script>

<style>
  .ripple-button {
    position: relative;
    overflow: hidden;
    min-height: 44px;
    padding: 12px 24px;
    border: 0;
    border-radius: 6px;
    background: #175bc5;
    color: white;
    font: 14px system-ui;
    cursor: pointer;
  }
  .ripple-button:focus-visible {
    outline: 2px solid #175bc5;
    outline-offset: 4px;
  }
  .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.35);
    pointer-events: none;
    animation: ripple-out 420ms cubic-bezier(0, 0, 0.2, 1) forwards;
  }
  @keyframes ripple-out {
    from {
      transform: scale(0);
      opacity: 1;
    }
    to {
      transform: scale(1);
      opacity: 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .ripple {
      display: none;
    }
    .ripple-button:active {
      background: #124a9f;
    }
  }
</style>