Interactive · Beginner

Confetti Celebration Button

A button that bursts colourful confetti from multiple angles, using canvas-confetti.

Requires canvas-confetti. Add the CDN tag below to your page (styles in <head>, scripts before </body>). The downloaded file already includes it.

<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js"></script>

<button class="cf-btn" id="cf">🎉 Celebrate</button>

body{background:#f6f7fa}
.cf-btn{font:700 17px/1 system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#ff7a18,#ff477e);border:0;border-radius:14px;padding:16px 32px;cursor:pointer;box-shadow:0 10px 30px rgba(255,71,126,.4)}
.cf-btn:active{transform:scale(.96)}

document.getElementById('cf').onclick=function(){
  confetti({particleCount:140,spread:75,origin:{y:.7}});
  setTimeout(function(){confetti({particleCount:80,angle:60,spread:55,origin:{x:0}})},120);
  setTimeout(function(){confetti({particleCount:80,angle:120,spread:55,origin:{x:1}})},240);
};

Free to use.This component uses canvas-confetti (linked above). Copy any file, or download a ready-to-open .html page with the CDN links already included.