Confetti on Click Button Template

Celebrate user achievements and successful actions with a delightful burst of confetti.

This button is perfect for moments of celebration, such as completing a purchase, signing up for a service, or finishing a challenging task, creating a memorable and positive experience.

Get Source Code Preview

About the Confetti on Click Button

Adding a "surprise and delight" feature like a confetti explosion can make an application feel more human and engaging. It turns a standard, transactional moment into a small celebration. This effect will typically have the most impact when used sparingly for genuinely important and positive user actions. It associates a feeling of fun and reward with using your site or application.

Features

Celebratory Animation: A vibrant, physics-based confetti animation is triggered on button click.
Customizable Effects: The confetti library allows for easy customization of colors, particle count, spread, and more. This template showcases a "fireworks" style burst.
Simple Implementation: The effect is easy to set up with just a few lines of JavaScript after including the library.

Dependencies & Code Breakdown

This component depends on an external JavaScript library called canvas-confetti. The library must be included in your page, for example via a CDN link in a script tag as shown in the template.

The JavaScript code first gets a reference to the button. It then adds a click event listener. Inside the listener, it calls the global confetti() function provided by the library. This function takes an options object where you can define the details of the animation. In this example, we set properties like particleCount and spread to create a "fireworks" effect originating from the center of the screen.

Code

Here is the complete code for the confetti on click button. Remember to include the canvas-confetti library for it to work.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Confetti on Click Button</title>
    <style>
        /*
         Component: Confetti on Click Button
         Description: A button that triggers a confetti animation.
        */
        :root {
            --confetti-btn-bg: #9933ff; /* A festive purple */
            --confetti-btn-text-color: #ffffff;
            --confetti-btn-bg-hover: #8000ff;
            --confetti-btn-focus-outline: #9933ff;
        }
        
        .confetti-container-1 {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 2rem;
            min-height: 250px;
            background-color: #f8f9fa;
        }

.confetti-btn-1 {
            display: inline-block;
            padding: 1.2rem 2.5rem;
            font-size: 1.25rem;
            font-weight: 700;
            
            color: var(--confetti-btn-text-color);
            background-color: var(--confetti-btn-bg);
            border: none;
            border-radius: 12px;
            cursor: pointer;
            text-decoration: none;
            box-shadow: 0 4px 15px rgba(153, 51, 255, 0.3);
            transition: all 0.2s ease-in-out;
        }
        
        .confetti-btn-1:hover {
            background-color: var(--confetti-btn-bg-hover);
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(153, 51, 255, 0.4);
        }
        
        .confetti-btn-1:focus-visible {
            outline: 3px solid var(--confetti-btn-focus-outline);
            outline-offset: 3px;
        }
    </style>
</head>
<body>
    
    
    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.2/dist/confetti.browser.min.js"></script>

<div class="confetti-container-1">
        <button type="button" class="confetti-btn-1" id="confettiBtn1">Complete Purchase</button>
    </div>

confettiButton.addEventListener('click', () => {
                // Do the actual work (e.g. submit form, save data) here first
                // ...
                
                // Then, trigger the celebration!
                const celebration = () => {
                    const duration = 2 * 1000;
                    const animationEnd = Date.now() + duration;
                    const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };

function randomInRange(min, max) {
                        return Math.random() * (max - min) + min;
                    }

const interval = setInterval(function() {
                        const timeLeft = animationEnd - Date.now();

if (timeLeft <= 0) {
                            return clearInterval(interval);
                        }

celebration();
            });
        });
    </script>

</body>
</html>

View Output