Ripple Wave Button

jitesh208
Jan 20, 2026 3
Live Preview

Live Editor

 <button class="ripple-button">
        <span>Click Me</span>
    </button>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #667eea, #764ba2);
    font-family: 'Arial', sans-serif;
    overflow: hidden;
}

.ripple-button {
    position: relative;
    padding: 30px 90px;
    font-size: 24px;
    font-weight: bold;
    color: white;
    background: linear-gradient(135deg, #6B73FF, #000DFF);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 13, 255, 0.4);
}

.ripple-button span {
    position: relative;
    z-index: 2;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.ripple-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0, 13, 255, 0.6);
}

.ripple-button:active {
    transform: translateY(-1px);
}

.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    pointer-events: none;
    animation: ripple-animation 0.8s ease-out;
}

@keyframes ripple-animation {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        width: 500px;
        height: 500px;
        opacity: 0;
    }
}

.wave {
    position: absolute;
    border: 3px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    pointer-events: none;
    animation: wave-animation 1.5s ease-out;
}

@keyframes wave-animation {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        width: 600px;
        height: 600px;
        opacity: 0;
    }
}
const btn = document.querySelector('.ripple-button');

btn.addEventListener('click', function(e) {
    const rect = btn.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    
    for (let i = 0; i < 3; i++) {
        setTimeout(() => {
            const ripple = document.createElement('div');
            ripple.className = 'ripple';
            ripple.style.left = x + 'px';
            ripple.style.top = y + 'px';
            btn.appendChild(ripple);
            
            setTimeout(() => ripple.remove(), 800);
        }, i * 200);
    }
    
    for (let i = 0; i < 5; i++) {
        setTimeout(() => {
            const wave = document.createElement('div');
            wave.className = 'wave';
            wave.style.left = x + 'px';
            wave.style.top = y + 'px';
            btn.appendChild(wave);
            
            setTimeout(() => wave.remove(), 1500);
        }, i * 100);
    }
});
Categories

Ripple Wave Button

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
