Click Spark

<button class="nuda-click-spark" aria-label="Click for sparks">Spark</button>

/* Click Spark — sparks fly outward from the click point. */
.nuda-click-spark {
  position: relative;
  padding: 12px 30px;
  background: #0c0c10;
  color: #e4ff54;
  border: 1px solid rgba(228, 255, 84, 0.4);
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  overflow: visible;
}

.nuda-click-spark__spark {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #e4ff54;
  transform: translate(-50%, -50%);
  animation: nuda-click-spark 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes nuda-click-spark {
  0%   { transform: translate(-50%, -50%) translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

.nuda-click-spark:focus-visible {
  outline: 2px solid #e4ff54;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .nuda-click-spark__spark { animation: none; display: none; }
}

/* Click Spark — vanilla JS
   Spawns 8 radial sparks at the click point. */
(function () {
  if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
  var COUNT = 8;
  document.querySelectorAll(".nuda-click-spark").forEach(function (btn) {
    btn.addEventListener("click", function (e) {
      var r = btn.getBoundingClientRect();
      var cx = e.clientX - r.left;
      var cy = e.clientY - r.top;
      for (var i = 0; i < COUNT; i++) {
        var s = document.createElement("span");
        s.className = "nuda-click-spark__spark";
        var a = (Math.PI * 2 * i) / COUNT;
        s.style.left = cx + "px";
        s.style.top = cy + "px";
        s.style.setProperty("--dx", Math.cos(a) * 26 + "px");
        s.style.setProperty("--dy", Math.sin(a) * 26 + "px");
        btn.appendChild(s);
        s.addEventListener("animationend", function () { this.remove(); });
      }
    });
  });
})();