Animated Button | AnimateItNow

Liquid Fill Effect

<button class="liquid-fill-btn">
    <span>Hover Me</span>
</button>

.liquid-fill-btn {
    position: relative;
    padding: 15px 40px;
    border: 2px solid #00d4ff;
    background: transparent;
    color: #00d4ff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    transition: color 0.3s;
    border-radius: 30px;
}

.liquid-fill-btn::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00d4ff;
    transition: top 0.5s;
    border-radius: 30px;
}

.liquid-fill-btn:hover::before {
    top: 0;
}

.liquid-fill-btn:hover {
    color: #000;
}

.liquid-fill-btn span {
    position: relative;
    z-index: 1;
}

Glitch Effect

<button class="glitch-btn">GLITCH</button>

.glitch-btn {
    padding: 15px 40px;
    border: none;
    background: #ff0080;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
}

.glitch-btn:hover {
    animation: glitch 0.3s infinite;
}

@keyframes glitch {
    0% {
        text-shadow: 0.05em 0 0 #00fffc, -0.05em -0.025em 0 #fc00ff,
                    0.025em 0.05em 0 #fffc00;
    }
    15% {
        text-shadow: 0.05em 0 0 #00fffc, -0.05em -0.025em 0 #fc00ff,
                    0.025em 0.05em 0 #fffc00;
    }
    16% {
        text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.025em 0 #fc00ff,
                    -0.05em -0.05em 0 #fffc00;
    }
    49% {
        text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.025em 0 #fc00ff,
                    -0.05em -0.05em 0 #fffc00;
    }
    50% {
        text-shadow: 0.025em 0.05em 0 #00fffc, 0.05em 0 0 #fc00ff,
                    0 -0.05em 0 #fffc00;
    }
    99% {
        text-shadow: 0.025em 0.05em 0 #00fffc, 0.05em 0 0 #fc00ff,
                    0 -0.05em 0 #fffc00;
    }
    100% {
                text-shadow: -0.025em 0 0 #00fffc, -0.025em -0.025em 0 #fc00ff,
                    -0.025em -0.05em 0 #fffc00;
    }
}

Shape Morph

<button class="morph-btn">Transform</button>

.morph-btn {
    padding: 15px 40px;
    border: none;
    background: #667eea;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 10px;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.morph-btn:hover {
    border-radius: 50px;
    background: #764ba2;
    transform: scale(1.1);
}

3D Rotate

<button class="rotate-3d-btn">3D Flip</button>

.rotate-3d-btn {
    padding: 15px 40px;
    border: none;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.rotate-3d-btn:hover {
    transform: rotateY(180deg);
}

Particle Burst

<button class="particle-btn" id="particleBtn">Click Me</button>

.particle-btn {
    position: relative;
    padding: 15px 40px;
    border: 2px solid #fff;
    background: transparent;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s;
}

.particle-btn:hover {
    color: #000;
    background: #fff;
}

.particle {
    position: absolute;
    background: #fff;
    pointer-events: none;
    border-radius: 50%;
    animation: particleAnimation 1s ease-out forwards;
}

@keyframes particleAnimation {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--x), var(--y)) scale(0);
        opacity: 0;
    }
}

document.getElementById('particleBtn').addEventListener('click', function(e) {
    const button = e.currentTarget;
    const rect = button.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    
    for (let i = 0; i < 30; i++) {
        createParticle(x, y, button);
    }
});

function createParticle(x, y, button) {
    const particle = document.createElement('span');
    particle.classList.add('particle');
    
    const size = Math.random() * 8 + 2;
    particle.style.width = size + 'px';
    particle.style.height = size + 'px';
    particle.style.left = x + 'px';
    particle.style.top = y + 'px';
    
    const destinationX = (Math.random() - 0.5) * 200;
    const destinationY = (Math.random() - 0.5) * 200;
    particle.style.setProperty('--x', destinationX + 'px');
    particle.style.setProperty('--y', destinationY + 'px');
    
    button.appendChild(particle);
    
    setTimeout(() => particle.remove(), 1000);
}

Elastic Bounce

<button class="elastic-btn">Bounce</button>

.elastic-btn {
    padding: 15px 40px;
    border: none;
    background: #4CAF50;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.elastic-btn:hover {
    transform: scale(1.1);
}

.elastic-btn:active {
    transform: scale(0.9);
}

Neon Glow

<button class="neon-btn">NEON</button>

.neon-btn {
    padding: 15px 40px;
    border: 2px solid #0ff;
    background: transparent;
    color: #0ff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    transition: all 0.3s;
    text-transform: uppercase;
}

.neon-btn:hover {
    color: #000;
    background: #0ff;
    box-shadow: 0 0 10px #0ff, 0 0 20px #0ff, 0 0 30px #0ff,
                                inset 0 0 10px #0ff;
}

Split Effect

<button class="split-btn">Split</button>

.split-btn {
    position: relative;
    padding: 15px 40px;
    border: none;
    background: #ef6e6e;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    z-index: 1;
}

.split-btn span {
    position: relative;
    z-index: 3;
}


.split-btn::after {
    content: '';
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background: #e5324d;
    transition: transform 0.3s;
    z-index: 2;
}

.split-btn::before {
    left: 0;
    transform: translateX(-100%);
}

.split-btn::after {
    right: 0;
    transform: translateX(100%);
}

.split-btn:hover::before {
    transform: translateX(0);
}

.split-btn:hover::after {
    transform: translateX(0);
}

Animated Border

<button class="border-btn">Border</button>

.border-btn {
    position: relative;
    padding: 15px 40px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
}

.border-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid transparent;
    border-image: linear-gradient(45deg, #ff0080, #00d4ff, #ff0080);
    border-image-slice: 1;
    animation: borderRotate 3s linear infinite;
}

@keyframes borderRotate {
    0% {
        border-image-source: linear-gradient(45deg, #ff0080, #00d4ff, #ff0080);
    }
    100% {
        border-image-source: linear-gradient(405deg, #ff0080, #00d4ff, #ff0080);
    }
}

Magnetic Effect

<button class="magnetic-btn" id="magneticBtn">Magnetic</button>

.magnetic-btn {
    position: relative;
    padding: 15px 40px;
    border: 2px solid #fff;
    background: transparent;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

const magneticBtn = document.getElementById('magneticBtn');

magneticBtn.addEventListener('mousemove', (e) => {
    const rect = magneticBtn.getBoundingClientRect();
    const x = e.clientX - rect.left - rect.width / 2;
    const y = e.clientY - rect.top - rect.height / 2;
    
    magneticBtn.style.transform = `translate(${x * 0.3}px, ${y * 0.3}px)`;
});

magneticBtn.addEventListener('mouseleave', () => {
    magneticBtn.style.transform = 'translate(0, 0)';
});

Wave Effect

<button class="wave-btn">Wave</button>

.wave-btn {
    position: relative;
    padding: 15px 40px;
    border: none;
    background: #3498db;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    border-radius: 30px;
}

.wave-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.wave-btn:hover::before {
    width: 300px;
    height: 300px;
}

Slide Text

<button class="slide-text-btn" data-text="Hovered!">
    <span>Hover Me</span>
</button>

.slide-text-btn {
    position: relative;
    padding: 15px 40px;
    border: 2px solid #e74c3c;
    background: transparent;
    color: #e74c3c;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    transition: color 0.3s;
}

.slide-text-btn span {
    display: inline-block;
    transition: transform 0.3s;
    position: relative;
    z-index: 2;
}

.slide-text-btn::before {
    content: attr(data-text);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 150%);
    color: #fff;
    transition: transform 0.3s;
    font-weight: 600;
    z-index: 2;
}

.slide-text-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #e74c3c;
    transform: translateY(100%);
    transition: transform 0.3s;
    z-index: 1;
}

.slide-text-btn:hover {
    color: #fff;
}

.slide-text-btn:hover span {
    transform: translateY(-200%);
}

.slide-text-btn:hover::before {
    transform: translate(-50%, -50%);
}

.slide-text-btn:hover::after {
    transform: translateY(0);
}

Gradient Border

<button class="gradient-border-btn">Gradient</button>

.gradient-border-btn {
    position: relative;
    padding: 15px 40px;
    background: #000;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    border-radius: 30px;
    z-index: 1;
}

    .gradient-border-btn::before {
        content: '';
        position: absolute;
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
        background: linear-gradient(45deg, #ff0080, #ff8c00, #ffd700, #00ff00, #00ffff, #ff0080);
        background-size: 400%;
        border-radius: 30px;
        z-index: -1;
        animation: gradientMove 3s ease infinite;
    }

    @keyframes gradientMove {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }

Icon Morph

<button class="icon-morph-btn">
    <span class="icon">→</span>
    <span>Next</span>
</button>

.icon-morph-btn {
    position: relative;
    padding: 15px 20px;
    border: none;
    background: #9b59b6;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s;
}

.icon-morph-btn .icon {
    width: 20px;
    height: 20px;
    transition: transform 0.3s;
}

.icon-morph-btn:hover {
    background: #8e44ad;
    padding-right: 30px;
}

.icon-morph-btn:hover .icon {
    transform: translateX(10px);
}

Ripple Effect

<button class="ripple-btn">Ripple</button>

.ripple-btn {
    position: relative;
    padding: 15px 40px;
    border: none;
    background: #2ecc71;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
}

.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: scale(0);
    animation: rippleEffect 0.6s ease-out;
}

@keyframes rippleEffect {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

document.querySelectorAll('.ripple-btn').forEach(button => {
    button.addEventListener('click', function(e) {
        const ripple = document.createElement('span');
        ripple.classList.add('ripple');
        
        const rect = this.getBoundingClientRect();
        const size = Math.max(rect.width, rect.height);
        const x = e.clientX - rect.left - size / 2;
        const y = e.clientY - rect.top - size / 2;
        
        ripple.style.width = ripple.style.height = size + 'px';
        ripple.style.left = x + 'px';
        ripple.style.top = y + 'px';
        
        this.appendChild(ripple);
        
        setTimeout(() => ripple.remove(), 600);
    });
});

Shiny Effect

<button class="shiny-btn">Shiny</button>

.shiny-btn {
    position: relative;
    padding: 15px 40px;
    border: none;
    background: linear-gradient(45deg, #f39c12, #f1c40f);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 30px;
    overflow: hidden;
}

.shiny-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s;
}

.shiny-btn:hover::before {
    left: 100%;
}

Pulse Shadow

<button class="pulse-shadow-btn">Pulse</button>

.pulse-shadow-btn {
    padding: 15px 40px;
    border: none;
    background: #e74c3c;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 30px;
    animation: pulseShadow 2s infinite;
}

@keyframes pulseShadow {
    0% {
        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
    }
    70% {
        box-shadow: 0 0 0 20px rgba(231, 76, 60, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
    }
}

Fold Effect

<button class="fold-btn">
    <span>Fold</span>
</button>

.fold-btn {
    position: relative;
    padding: 15px 40px;
    border: 2px solid #34495e;
    background: transparent;
    color: #34495e;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    transition: color 0.3s;
}

.fold-btn::before,
.fold-btn::after {
    content: '';
    position: absolute;
    background: #34495e;
    transition: transform 0.3s;
}

.fold-btn::before {
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    transform-origin: top;
    transform: scaleY(0);
}

.fold-btn::after {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    transform-origin: bottom;
    transform: scaleY(0);
}

.fold-btn:hover {
    color: #fff;
}

.fold-btn:hover::before,
.fold-btn:hover::after {
    transform: scaleY(1);
}

Typewriter Effect

<button class="typewriter-btn">
    <span>Type</span>
</button>

.typewriter-btn {
    position: relative;
    padding: 15px 40px;
    border: 2px solid #16a085;
    background: transparent;
    color: #16a085;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
}

.typewriter-btn span {
    display: inline-block;
}

.typewriter-btn:hover span {
    animation: typewriter 0.5s steps(10);
}

@keyframes typewriter {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

Bubble Float

<button class="bubble-btn">Bubble</button>

.bubble-btn {
    position: relative;
    padding: 15px 40px;
    border: none;
    background: #3498db;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 30px;
    overflow: hidden;
}

.bubble {
    position: absolute;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: bubbleFloat 2s ease-in-out infinite;
}

@keyframes bubbleFloat {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) scale(0);
        opacity: 0;
    }
}

document.querySelectorAll('.bubble-btn').forEach(button => {
            setInterval(() => {
                createBubble(button);
            }, 300);
        });

        function createBubble(button) {
            const bubble = document.createElement('span');
            bubble.classList.add('bubble');

            const size = Math.random() * 10 + 5;
            bubble.style.width = size + 'px';
            bubble.style.height = size + 'px';
            bubble.style.left = Math.random() * 100 + '%';
            bubble.style.bottom = '0';

            button.appendChild(bubble);

            setTimeout(() => bubble.remove(), 2000);
        }

Animated Hover Button

Animated Buttons Collection

Liquid Fill Effect

Glitch Effect

Shape Morph

3D Rotate

Particle Burst

Elastic Bounce

Neon Glow

Split Effect

Animated Border

Magnetic Effect

Wave Effect

Slide Text

Gradient Border

Icon Morph

Ripple Effect

Shiny Effect

Pulse Shadow

Fold Effect

Typewriter Effect

Bubble Float