Confetti Burst

<button class="nuda-confetti-burst" aria-label="Celebrate">
  <span class="nuda-confetti-burst__label">Celebrate</span>
  <span class="nuda-confetti-burst__pieces" aria-hidden="true">
    <span class="nuda-confetti-burst__piece" style="--a:0deg;   --c:#e4ff54"></span>
    <span class="nuda-confetti-burst__piece" style="--a:30deg;  --c:#ff5db1"></span>
    <span class="nuda-confetti-burst__piece" style="--a:60deg;  --c:#5dd0ff"></span>
    <span class="nuda-confetti-burst__piece" style="--a:90deg;  --c:#fafafa"></span>
    <span class="nuda-confetti-burst__piece" style="--a:120deg; --c:#e4ff54"></span>
    <span class="nuda-confetti-burst__piece" style="--a:150deg; --c:#ff5db1"></span>
    <span class="nuda-confetti-burst__piece" style="--a:180deg; --c:#5dd0ff"></span>
    <span class="nuda-confetti-burst__piece" style="--a:210deg; --c:#fafafa"></span>
    <span class="nuda-confetti-burst__piece" style="--a:240deg; --c:#e4ff54"></span>
    <span class="nuda-confetti-burst__piece" style="--a:270deg; --c:#ff5db1"></span>
    <span class="nuda-confetti-burst__piece" style="--a:300deg; --c:#5dd0ff"></span>
    <span class="nuda-confetti-burst__piece" style="--a:330deg; --c:#fafafa"></span>
  </span>
</button>

/* Confetti Burst
   Radial confetti pop re-triggered on every click.
   Customize: --confetti-burst-bg, piece colors via inline --c. */

.nuda-confetti-burst {
  --confetti-burst-bg: #e4ff54;
  position: relative;
  background: var(--confetti-burst-bg);
  color: #09090b;
  border: none;
  border-radius: 10px;
  padding: 12px 22px;
  min-height: 44px;
  font: 600 14px/1 system-ui, sans-serif;
  cursor: pointer;
  outline: none;
}

.nuda-confetti-burst:focus-visible {
  box-shadow: 0 0 0 3px rgba(228, 255, 84, 0.5);
}

.nuda-confetti-burst__pieces {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nuda-confetti-burst__piece {
  position: absolute;
  width: 7px;
  height: 7px;
  background: var(--c, #e4ff54);
  border-radius: 1px;
  opacity: 0;
  transform: rotate(var(--a, 0deg)) translateY(0) scale(0.4);
  will-change: transform, opacity;
}

.nuda-confetti-burst__piece:nth-child(2n) { width: 5px; height: 9px; }
.nuda-confetti-burst__piece:nth-child(3n) { border-radius: 50%; }

.nuda-confetti-burst--pop .nuda-confetti-burst__piece {
  animation: nuda-confetti-burst-fly 0.8s cubic-bezier(0.2, 0.6, 0.4, 1) forwards;
}

@keyframes nuda-confetti-burst-fly {
  0%   { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(0.4); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-46px) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-confetti-burst--pop .nuda-confetti-burst__piece { animation: none; opacity: 0; }
}

/* Confetti Burst — vanilla JS
   Re-triggers the pop animation on each click. */

(function () {
  document.querySelectorAll(".nuda-confetti-burst").forEach(function (btn) {
    btn.addEventListener("click", function () {
      btn.classList.remove("nuda-confetti-burst--pop");
      void btn.offsetWidth; // reflow so the animation restarts
      btn.classList.add("nuda-confetti-burst--pop");
      setTimeout(function () {
        btn.classList.remove("nuda-confetti-burst--pop");
      }, 900);
    });
  });
})();