Ripple Effect Button

<style>
  @keyframes ripple { to { transform: scale(2.4); opacity: 0; } }
</style>

<button type="button" class="ripple-btn relative overflow-hidden rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2">
  Click me
</button>

<script>
  (function () {
    var btn = document.querySelector('.ripple-btn');
    if (!btn) return;
    var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    btn.addEventListener('click', function (e) {
      if (reduce) return;
      var rect = btn.getBoundingClientRect();
      var size = Math.max(rect.width, rect.height);
      var span = document.createElement('span');
      span.style.cssText =
        'position:absolute;border-radius:9999px;background:rgba(255,255,255,0.4);pointer-events:none;width:' +
        size + 'px;height:' + size + 'px;left:' + (e.clientX - rect.left - size / 2) +
        'px;top:' + (e.clientY - rect.top - size / 2) + 'px;animation:ripple 600ms ease-out forwards';
      btn.appendChild(span);
      setTimeout(function () { span.remove(); }, 600);
    });
  })();
</script>