Click Ripple Effect Button Template

Add dynamic, tactile feedback to your buttons with this cool click ripple effect.

Inspired by Google's Material Design, this effect creates a circle that ripples out from the exact point of a user's click, providing an engaging and modern interaction.

Get Source Code Preview

About the Click Ripple Effect Button

The ripple effect is a popular micro-interaction that provides immediate and tangible feedback for a click or tap. It confirms to the user not only that their action was registered, but precisely *where* it was registered. This template achieves the effect with a combination of CSS and JavaScript: the JavaScript detects the click location and creates the ripple element, while CSS handles the element's appearance and animation.

Features

Dynamic Ripple Animation: The ripple originates from the cursor's position, making every click feel unique and responsive.
Self-Contained and Reusable: The JavaScript is designed to work on any element that has the specified class name (ripple-btn-1).
Smooth CSS Animation: The expanding circle and fade-out effects are handled by a CSS @keyframes animation for smooth performance.
Accessible Foundation: Built on a semantic button element with a standard focus style.

Code Breakdown

The CSS sets the button's position to relative and overflow to hidden, which is required in order to contain the ripple. The ripple itself is a span element that is created dynamically by JavaScript. It is styled to be a circle and is positioned absolutely within the button.

The JavaScript attaches a click event listener. When a click occurs, it calculates the cursor's coordinates relative to the button, creates a new element, sets its position using the calculated coordinates, and appends it to the button. The CSS animation then takes over. After the animation completes, the script removes the span from the DOM to keep the page clean.

Code

Here is the complete HTML, CSS, and JavaScript for the click ripple effect button.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Click Ripple Effect Button</title>
    <style>
        /*
         Component: Click Ripple Effect Button
         Description: A button with a JavaScript-powered ripple effect.
        */
        :root {
            --ripple-btn-bg: #007bff;
            --ripple-btn-text-color: #ffffff;
            --ripple-btn-bg-hover: #0069d9;
            --ripple-color: rgba(255, 255, 255, 0.7);
        }
        
        .ripple-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;
            background-color: #f8f9fa;
        }

.ripple-btn-1 {
            position: relative; /* Essential for containing the ripple */
            overflow: hidden;   /* Hides the ripple outside the button's bounds */
            
            display: inline-block;
            padding: 1rem 2rem;
            font-size: 1.1rem;
            font-weight: 600;
            
            color: var(--ripple-btn-text-color);
            background-color: var(--ripple-btn-bg);
            border: none;
            border-radius: 8px;
            cursor: pointer;
            text-decoration: none;
            transition: background-color 0.2s ease;
        }

.ripple-btn-1:hover {
            background-color: var(--ripple-btn-bg-hover);
        }

.ripple {
            position: absolute;
            border-radius: 50%;
            background-color: var(--ripple-color);
            transform: scale(0);
            animation: ripple-effect 0.6s linear;
            pointer-events: none; /* Make sure it doesn't interfere with other clicks */
        }
        
        @keyframes ripple-effect {
            to {
                transform: scale(4);
                opacity: 0;
            }
        }
    </style>
</head>
<body>

<div class="ripple-container-1">
        <button type="button" class="ripple-btn-1">Click Me</button>
    </div>

buttons.forEach(button => {
                button.addEventListener('click', function (e) {
                    const rect = this.getBoundingClientRect();
                    
                    // Get the click coordinates relative to the button
                    const x = e.clientX - rect.left;
                    const y = e.clientY - rect.top;

// Remove any existing ripples to prevent clutter
                    const existingRipple = this.querySelector('.ripple');
                    if(existingRipple) {
                        existingRipple.remove();
                    }

// Create the ripple element
                    const circle = document.createElement('span');
                    const diameter = Math.max(this.clientWidth, this.clientHeight);
                    const radius = diameter / 2;

circle.style.width = circle.style.height = `${diameter}px`;
                    circle.style.left = `${x - radius}px`;
                    circle.style.top = `${y - radius}px`;
                    circle.classList.add('ripple');
                    
                    this.appendChild(circle);

// Remove the ripple element after the animation finishes
                    setTimeout(() => {
                        if (circle) circle.remove();
                    }, 600); // Must match animation duration
                });
            });
        });
    </script>

</body>
</html>

View Output