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>