Confetti Burst Badge

<!--
  Author: @yokkcode
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="confetti-badge">
  <span class="confetti-badge__particle" style="--x:-30px; --y:-26px; --c:#f472b6;"></span>
  <span class="confetti-badge__particle" style="--x:28px; --y:-30px; --c:#38bdf8;"></span>
  <span class="confetti-badge__particle" style="--x:-32px; --y:20px; --c:#fbbf24;"></span>
  <span class="confetti-badge__particle" style="--x:30px; --y:24px; --c:#4ade80;"></span>
  <span class="confetti-badge__particle" style="--x:0px; --y:-38px; --c:#a78bfa;"></span>
  <span class="confetti-badge__icon">🏆</span>
</div>

/*
 * Author: @yokkcode
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.confetti-badge {
  position: relative;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle, #292330, #17141c);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.6);
  cursor: pointer;
}
.confetti-badge__icon {
  font-size: 30px;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.6));
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.confetti-badge:hover .confetti-badge__icon {
  transform: scale(1.15) rotate(-8deg);
}
.confetti-badge__particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--c);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}
.confetti-badge:hover .confetti-badge__particle {
  animation: confetti-fly 0.7s ease-out forwards;
}
@keyframes confetti-fly {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1) translate(0, 0) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.4) translate(var(--x), var(--y)) rotate(180deg); }
}