Efeitos em Botões com JavaScript

← Voltar
Nenhum efeito encontrado com esse termo.

1. Efeito Ripple

HTML:

<button class="btn btn-ripple">Clique Aqui</button>

CSS:

.btn-ripple {
    background: #3498db;
    color: white;
    border: none;
    position: relative;
    overflow: hidden;
}

.ripple {
    position: absolute;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: scale(0);
    animation: ripple 0.6s linear;
    pointer-events: none;
}

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

JavaScript:

document.querySelectorAll('.btn-ripple').forEach(button => {
    button.addEventListener('click', function(e) {
        let x = e.clientX - e.target.offsetLeft;
        let y = e.clientY - e.target.offsetTop;
        
        let ripple = document.createElement('span');
        ripple.className = 'ripple';
        ripple.style.left = x + 'px';
        ripple.style.top = y + 'px';
        
        this.appendChild(ripple);
        
        setTimeout(() => ripple.remove(), 600);
    });
});

2. Efeito Loading

HTML:

<button class="btn btn-loading">Processar</button>

CSS:

.btn-loading {
    background: #2ecc71;
    color: white;
    border: none;
    position: relative;
    transition: all 0.3s;
}

.btn-loading.loading {
    background: #27ae60;
    color: transparent;
}

.btn-loading.loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    border: 2px solid #fff;
    border-radius: 50%;
    border-top-color: transparent;
    transform: translate(-50%, -50%);
    animation: spin 1s infinite linear;
}

@keyframes spin {
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

JavaScript:

document.querySelectorAll('.btn-loading').forEach(button => {
    button.addEventListener('click', function() {
        if (!this.classList.contains('loading')) {
            this.classList.add('loading');
            setTimeout(() => {
                this.classList.remove('loading');
            }, 2000);
        }
    });
});

3. Efeito Magnetic

HTML:

<button class="btn btn-magnetic">Clique aqui</button>

CSS:

.btn-magnetic {
    background: #9b59b6;
    color: white;
    border: none;
    transition: transform 0.2s;
}

JavaScript:

document.querySelectorAll('.btn-magnetic').forEach(button => {
    button.addEventListener('mousemove', function(e) {
        const rect = this.getBoundingClientRect();
        const x = e.clientX - rect.left - rect.width / 2;
        const y = e.clientY - rect.top - rect.height / 2;
        
        this.style.transform = `translate(${x * 0.1}px, ${y * 0.1}px)`;
    });

    button.addEventListener('mouseleave', function() {
        this.style.transform = 'translate(0, 0)';
    });
});

4. Efeito Particles

HTML:

<button class="btn btn-particles">Clique aqui</button>

CSS:

.btn-particles {
    background: #e74c3c;
    color: white;
    border: none;
    position: relative;
    overflow: hidden;
}

.particle {
    position: absolute;
    pointer-events: none;
    background: #fff;
    border-radius: 50%;
    width: 6px;
    height: 6px;
}

JavaScript:

document.querySelectorAll('.btn-particles').forEach(button => {
    button.addEventListener('click', function(e) {
        const x = e.clientX - e.target.offsetLeft;
        const y = e.clientY - e.target.offsetTop;
        
        for (let i = 0; i < 20; i++) {
            createParticle(x, y, this);
        }
    });
});

function createParticle(x, y, parent) {
    const particle = document.createElement('span');
    particle.className = 'particle';
    
    const destinationX = x + (Math.random() - 0.5) * 2 * 75;
    const destinationY = y + (Math.random() - 0.5) * 2 * 75;
    
    particle.style.left = x + 'px';
    particle.style.top = y + 'px';
    parent.appendChild(particle);
    
    const animation = particle.animate([
        {
            transform: 'translate(0, 0)',
            opacity: 1
        },
        {
            transform: `translate(${destinationX - x}px, ${destinationY - y}px)`,
            opacity: 0
        }
    ], {
        duration: 1000,
        easing: 'cubic-bezier(0, .9, .57, 1)',
    });
    
    animation.onfinish = () => particle.remove();
}

5. Efeito Glitch

HTML:

<button class="btn btn-glitch" data-text="Clique aqui">Clique aqui</button>

CSS:

.btn-glitch {
    background: #2c3e50;
    color: white;
    border: none;
    position: relative;
}

.btn-glitch::before,
.btn-glitch::after {
    content: attr(data-text);
    position: absolute;
    width: 100%;
    height: 100%;
    background: #2c3e50;
    top: 0;
    left: 0;
    opacity: 0.8;
    display: flex;
    align-items: center;
    justify-content: center;
}

JavaScript:

document.querySelectorAll('.btn-glitch').forEach(button => {
    button.addEventListener('mouseenter', function() {
        const glitchAnimation = () => {
            const glitch = () => {
                const shift = Math.random() * 4 - 2;
                const color = `rgb(
                    ${Math.floor(Math.random() * 255)},
                    ${Math.floor(Math.random() * 255)},
                    ${Math.floor(Math.random() * 255)}
                )`;
                
                this.style.transform = `translate(${shift}px, ${shift}px)`;
                this.style.textShadow = `${shift}px 0 ${color}`;
            };
            
            const interval = setInterval(glitch, 50);
            
            this.addEventListener('mouseleave', () => {
                clearInterval(interval);
                this.style.transform = '';
                this.style.textShadow = '';
            }, { once: true });
        };
        
        glitchAnimation();
    });
});

6. Efeito Neon

HTML:

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

CSS:

.btn-neon {
    background: transparent;
    color: #00fff2;
    border: 2px solid #00fff2;
    text-shadow: 0 0 8px rgba(0, 255, 242, 0.5);
    box-shadow: 0 0 20px rgba(0, 255, 242, 0);
    transition: all 0.3s ease;
}

.btn-neon.active {
    box-shadow: 
        0 0 20px rgba(0, 255, 242, 0.5),
        0 0 40px rgba(0, 255, 242, 0.3),
        0 0 60px rgba(0, 255, 242, 0.1);
    text-shadow: 
        0 0 8px rgba(0, 255, 242, 0.8),
        0 0 12px rgba(0, 255, 242, 0.5);
}

JavaScript:

document.querySelectorAll('.btn-neon').forEach(button => {
    button.addEventListener('click', function() {
        this.classList.add('active');
        
        const pulseAnimation = () => {
            const intensity = Math.random() * 0.5 + 0.5;
            this.style.opacity = intensity;
        };
        
        const interval = setInterval(pulseAnimation, 100);
        
        setTimeout(() => {
            clearInterval(interval);
            this.classList.remove('active');
            this.style.opacity = '';
        }, 1000);
    });
});

7. Efeito 3D Flip

HTML:

<button class="btn btn-3d-flip">
    <span class="front">Clique aqui</span>
    <span class="back">Incrível!</span>
</button>

CSS:

.btn-3d-flip {
    background: transparent;
    border: none;
    perspective: 1000px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.5s;
    width: 120px;
    height: 40px;
}

.btn-3d-flip .front,
.btn-3d-flip .back {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    background: #3498db;
    color: white;
    padding: 12px 24px;
    border-radius: 4px;
}

.btn-3d-flip .back {
    background: #2980b9;
    transform: rotateX(180deg);
}

.btn-3d-flip.flipped {
    transform: rotateX(180deg);
}

JavaScript:

document.querySelectorAll('.btn-3d-flip').forEach(button => {
    button.addEventListener('click', function() {
        this.classList.add('flipped');
        
        setTimeout(() => {
            this.classList.remove('flipped');
        }, 1000);
    });
});

8. Efeito Liquid Fill

HTML:

<button class="btn btn-liquid">Clique aqui</button>

CSS:

.btn-liquid {
    background: transparent;
    border: 2px solid #4CAF50;
    color: #4CAF50;
    position: relative;
    overflow: hidden;
    transition: color 0.3s;
}

.btn-liquid::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #4CAF50;
    transform: translateY(100%);
    transition: transform 0.3s;
    z-index: -1;
}

.btn-liquid:hover {
    color: white;
}

.btn-liquid:hover::before {
    transform: translateY(0);
}

9. Efeito Shockwave

HTML:

<button class="btn btn-shockwave">Clique aqui</button>

CSS:

.btn-shockwave {
    background: #FF5722;
    color: white;
    border: none;
    position: relative;
    overflow: hidden;
}

@keyframes shockwave {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

.shockwave-circle {
    position: absolute;
    border: 2px solid #FF5722;
    border-radius: 50%;
    pointer-events: none;
}

JavaScript:

button.addEventListener('click', function(e) {
    const rect = this.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    
    const circle = document.createElement('div');
    circle.className = 'shockwave-circle';
    circle.style.left = x + 'px';
    circle.style.top = y + 'px';
    
    this.appendChild(circle);
    circle.style.animation = 'shockwave 0.5s ease-out forwards';
    
    setTimeout(() => circle.remove(), 500);
});

10. Efeito Gradient Border

HTML:

<button class="btn btn-gradient-border">Clique aqui</button>

CSS:

.btn-gradient-border {
    background: transparent;
    border: none;
    color: white;
    position: relative;
    z-index: 1;
    padding: 14px 26px;
}

.btn-gradient-border::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 4px;
    padding: 2px;
    background: linear-gradient(45deg, #ff0000, #00ff00, #0000ff, #ff0000);
    background-size: 400% 400%;
    animation: gradient-border 3s ease infinite;
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

@keyframes gradient-border {
    0% { background-position: 0% 50% }
    50% { background-position: 100% 50% }
    100% { background-position: 0% 50% }
}

11. Efeito Spotlight

HTML:

<button class="btn btn-spotlight">Clique aqui</button>

CSS:

.btn-spotlight {
    background: #6200EA;
    color: white;
    border: none;
    position: relative;
    overflow: hidden;
}

.btn-spotlight::before {
    content: '';
    position: absolute;
    width: 40px;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    transform: skewX(-20deg);
    left: -50px;
    top: 0;
    transition: left 0.5s;
}

.btn-spotlight:hover::before {
    left: 150%;
}

12. Efeito Elastic

HTML:

<button class="btn btn-elastic">Clique aqui</button>

CSS:

.btn-elastic {
    background: #E91E63;
    color: white;
    border: none;
    transition: transform 0.2s;
}

.btn-elastic.clicked {
    animation: elastic 0.5s ease;
}

@keyframes elastic {
    0% { transform: scale(1); }
    30% { transform: scale(1.15, 0.8); }
    50% { transform: scale(0.9, 1.1); }
    70% { transform: scale(1.05, 0.95); }
    100% { transform: scale(1); }
}

JavaScript:

button.addEventListener('click', function() {
    if (!this.classList.contains('clicked')) {
        this.classList.add('clicked');
        setTimeout(() => {
            this.classList.remove('clicked');
        }, 500);
    }
});

13. Efeito Cyberpunk

HTML:

<button class="btn btn-cyberpunk">Clique aqui</button>

CSS:

.btn-cyberpunk {
    background: #000;
    color: #0ff;
    border: 2px solid #0ff;
    text-shadow: 0 0 10px #0ff;
    box-shadow: 0 0 10px #0ff, inset 0 0 10px #0ff;
    position: relative;
    overflow: hidden;
}

.btn-cyberpunk::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(0, 255, 255, 0.1) 10px,
        rgba(0, 255, 255, 0.1) 20px
    );
    animation: glitch 10s linear infinite;
}

@keyframes glitch {
    0% { transform: translate(0, 0); }
    20% { transform: translate(-5px, 5px); }
    40% { transform: translate(5px, -5px); }
    60% { transform: translate(-5px, -5px); }
    80% { transform: translate(5px, 5px); }
    100% { transform: translate(0, 0); }
}

14. Efeito Morphing

HTML:

<button class="btn btn-morphing">Clique aqui</button>

CSS:

.btn-morphing {
    background: #8E2DE2;
    color: white;
    border: none;
    position: relative;
    transition: all 0.3s ease;
    border-radius: 50px;
}

.btn-morphing:hover {
    border-radius: 4px;
    background: linear-gradient(45deg, #8E2DE2, #4A00E0);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(142, 45, 226, 0.4);
}

.btn-morphing:active {
    transform: translateY(0);
    box-shadow: 0 5px 10px rgba(142, 45, 226, 0.4);
}

15. Efeito 3D Layers

HTML:

<button class="btn btn-3d-layers">
    <span>Clique aqui</span>
</button>

CSS:

.btn-3d-layers {
    background: none;
    border: none;
    color: white;
    position: relative;
    padding: 16px 32px;
    perspective: 1000px;
}

.btn-3d-layers span {
    display: inline-block;
    position: relative;
    background: #FF4B2B;
    padding: 16px 32px;
    border-radius: 4px;
    transition: transform 0.3s;
    transform-style: preserve-3d;
}

.btn-3d-layers span::before,
.btn-3d-layers span::after {
    content: '';
    position: absolute;
    border-radius: inherit;
}

.btn-3d-layers span::before {
    background: #FF416C;
    top: 5px;
    left: 5px;
    right: -5px;
    bottom: -5px;
    transform: translateZ(-10px);
}

.btn-3d-layers span::after {
    background: #FF7849;
    top: 10px;
    left: 10px;
    right: -10px;
    bottom: -10px;
    transform: translateZ(-20px);
}

.btn-3d-layers:hover span {
    transform: translateZ(20px);
}
Menus

Menus

Efeitos modernos e interativos para menus de navegação, incluindo dropdowns e animações suaves.

Ver Efeitos