Ink Ripple

<button class="nuda-btn-ripple-ink">
  <span class="nuda-btn-ripple-ink__label">Ink Ripple</span>
</button>

/* Ink Ripple — spawns an expanding ink dot at the click point.
   Respects prefers-reduced-motion. */
(function () {
  if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
  document.querySelectorAll(".nuda-btn-ripple-ink").forEach(function (btn) {
    btn.addEventListener("click", function (e) {
      var r = btn.getBoundingClientRect();
      var ink = document.createElement("span");
      ink.className = "nuda-btn-ripple-ink__ink";
      ink.style.left = (e.clientX - r.left) + "px";
      ink.style.top = (e.clientY - r.top) + "px";
      btn.appendChild(ink);
      ink.addEventListener("animationend", function () { ink.remove(); });
    });
  });
})();

/* Ink Ripple — material-style ink burst from the click point. */
.nuda-btn-ripple-ink {
  position: relative;
  padding: 12px 30px;
  background: #e4ff54;
  color: #09090b;
  border: 0;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
}

.nuda-btn-ripple-ink__label { position: relative; z-index: 1; }

.nuda-btn-ripple-ink__ink {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: rgba(9, 9, 11, 0.35);
  transform: scale(0);
  animation: nuda-ink-ripple 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes nuda-ink-ripple {
  to { transform: scale(14); opacity: 0; }
}

.nuda-btn-ripple-ink:focus-visible {
  outline: 2px solid #e4ff54;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .nuda-btn-ripple-ink__ink { animation: none; display: none; }
}