Free Component
Confetti Burst Celebration Button
An interactive CTA button that triggers a physics-based particle confetti burst explosion across the screen on click.
Colours in this gradient
#0f172a#ec4899#f59e0b#38bdf8
background: ;The code
Plain HTML, CSS and JavaScript with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.
<div class="conf-stage">
<canvas id="confettiCanvas" class="conf-canvas"></canvas>
<div class="conf-center">
<button class="conf-btn" id="confettiBtn">
<span>Celebrate Launch</span> 🎉
</button>
<div class="conf-hint">Click button to trigger confetti physics</div>
</div>
</div>The AI prompt
Paste this into an AI coding tool to generate the same component, then ask it to adapt the colours, text or framework to your project.
Create a celebration confetti burst button with canvas particle physics in HTML, CSS and vanilla JavaScript. Requirements: - Centered gradient CTA button. - Canvas overlay rendering 80 confetti square particles with gravity and velocity vectors on click. - Randomized colors, rotation, and fading alpha. - Pointer-events: none on canvas. Return one HTML file with <style> and <script> tags.
How to build it, step by step
- 1
Track button bounding rectangle to calculate origin (x, y).
- 2
Spawn particles with random upward velocities and gravity.
- 3
Animate particles on HTML5 canvas using requestAnimationFrame.
Customisation tips
- Keep canvas background transparent with clearRect so parent interface remains visible.