Efeitos em Botões

← Voltar
Nenhum efeito encontrado com esse termo.

1. Efeito 3D Push

HTML:

<button class="demo-btn btn-3d">3D Push</button>

CSS:

.btn-3d {
    background: #2ecc71;
    color: white;
    box-shadow: 0 5px #27ae60;
    transform: translateY(0);
}
.btn-3d:hover {
    box-shadow: 0 3px #27ae60;
    transform: translateY(2px);
}
.btn-3d:active {
    box-shadow: 0 0 #27ae60;
    transform: translateY(5px);
}

2. Efeito Ripple

HTML:

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

CSS:

.btn-ripple {
    background: #3498db;
    color: white;
    position: relative;
    overflow: hidden;
}
.btn-ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease-out, height 0.6s ease-out;
}
.btn-ripple:hover::after {
    width: 300px;
    height: 300px;
}

3. Efeito Neon Pulse

HTML:

<button class="demo-btn btn-neon-pulse">Neon Pulse</button>

CSS:

.btn-neon-pulse {
    background: transparent;
    color: #ff00ff;
    border: 2px solid #ff00ff;
    box-shadow: 0 0 5px #ff00ff;
    text-shadow: 0 0 5px #ff00ff;
}
.btn-neon-pulse:hover {
    animation: neonPulse 1.5s infinite;
    background: #ff00ff;
    color: white;
}
@keyframes neonPulse {
    0% { box-shadow: 0 0 5px #ff00ff; }
    50% { box-shadow: 0 0 20px #ff00ff; }
    100% { box-shadow: 0 0 5px #ff00ff; }
}

4. Efeito Shake

HTML:

<button class="demo-btn btn-shake">Shake</button>

CSS:

.btn-shake {
    background: #e74c3c;
    color: white;
}
.btn-shake:hover {
    animation: shake 0.5s;
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

5. Efeito Split

HTML:

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

CSS:

.btn-split {
    background: #9b59b6;
    color: white;
    position: relative;
    overflow: hidden;
    transition: color 0.3s ease;
}
.btn-split::before,
.btn-split::after {
    content: '';
    position: absolute;
    width: 50%;
    height: 110%;
    background: #8e44ad;
    top: -5%;
    transform: skewX(15deg);
    transition: transform 0.4s cubic-bezier(0.3, 1, 0.2, 1);
    z-index: -1;
}
.btn-split::before {
    left: -55%;
}
.btn-split::after {
    right: -55%;
    transform: skewX(-15deg);
}
.btn-split:hover {
    color: #ffffff;
}
.btn-split:hover::before {
    transform: translateX(100%) skewX(15deg);
}
.btn-split:hover::after {
    transform: translateX(-100%) skewX(-15deg);
}

6. Efeito Gradient Border

HTML:

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

CSS:

.btn-gradient-border {
    background: white;
    color: #333;
    border: 3px solid transparent;
    background-image: linear-gradient(white, white), linear-gradient(45deg, #ff6b6b, #4ecdc4);
    background-origin: border-box;
    background-clip: content-box, border-box;
}
.btn-gradient-border:hover {
    transform: scale(1.05);
}

7. Efeito Shine

HTML:

<button class="demo-btn btn-shine">Shine</button>

CSS:

.btn-shine {
    background: #2c3e50;
    color: white;
    overflow: hidden;
}
.btn-shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to bottom right, rgba(255,255,255,0), rgba(255,255,255,0.4), rgba(255,255,255,0));
    transform: skewX(-25deg);
    transition: 0.5s;
}
.btn-shine:hover::before {
    left: 125%;
}

8. Efeito Glitch

HTML:

<button class="demo-btn btn-glitch">Glitch</button>

CSS:

.btn-glitch {
    background: #000;
    color: #fff;
}
.btn-glitch:hover {
    animation: glitch 0.3s linear infinite;
}
@keyframes glitch {
    0% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
    100% { transform: translate(0); }
}

9. Efeito Magnetic

HTML:

<button class="demo-btn btn-magnetic">Magnetic</button>

CSS:

.btn-magnetic {
    background: #1abc9c;
    color: white;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.btn-magnetic:hover {
    transform: scale(1.1) rotate(-2deg);
}

10. Efeito Double Layer

HTML:

<button class="demo-btn btn-double-layer">Double Layer</button>

CSS:

.btn-double-layer {
    background: #e17055;
    color: white;
    border: none;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.btn-double-layer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #d63031;
    z-index: -1;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.3s;
}
.btn-double-layer:hover::before {
    transform: scaleY(1);
}

11. Efeito Liquid

HTML:

<button class="demo-btn btn-liquid">Liquid</button>

CSS:

.btn-liquid {
    background: #4CAF50;
    color: white;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-liquid::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.1);
    transform: translateX(-100%);
    transition: transform 0.3s;
    z-index: -1;
}

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

12. Efeito Outline Fill

HTML:

<button class="demo-btn btn-outline-fill">Outline Fill</button>

CSS:

.btn-outline-fill {
    background: none;
    border: 2px solid #FF5722;
    color: #FF5722;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
}

.btn-outline-fill::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #FF5722;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.3s;
    z-index: -1;
}

.btn-outline-fill:hover {
    color: white;
}

.btn-outline-fill:hover::before {
    transform: scaleY(1);
}

13. Efeito Rotate

HTML:

<button class="demo-btn btn-rotate">Rotate</button>

CSS:

.btn-rotate {
    background: #673AB7;
    color: white;
    transition: transform 0.3s;
}

.btn-rotate:hover {
    transform: rotate(5deg) scale(1.1);
}

14. Efeito Bounce

HTML:

<button class="demo-btn btn-bounce">Bounce</button>

CSS:

.btn-bounce {
    background: #E91E63;
    color: white;
    animation: none;
}

.btn-bounce:hover {
    animation: bounce 0.5s;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

15. Efeito Swipe

HTML:

<button class="demo-btn btn-swipe">Swipe</button>

CSS:

.btn-swipe {
    background: #009688;
    color: white;
    position: relative;
    overflow: hidden;
}

.btn-swipe::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    background: linear-gradient(to bottom right, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0));
    transform: rotate(45deg) translate(-100%, -100%);
    transition: all 0.3s;
}

.btn-swipe:hover::after {
    transform: rotate(45deg) translate(100%, 100%);
}

16. Efeito Neon Border

HTML:

<button class="demo-btn btn-neon-border">Neon Border</button>

CSS:

.btn-neon-border {
    background: transparent;
    border: 2px solid #00ff00;
    color: #00ff00;
    box-shadow: 0 0 5px #00ff00,
               0 0 10px #00ff00,
               0 0 20px #00ff00;
    text-shadow: 0 0 5px #00ff00;
    transition: all 0.3s;
}

.btn-neon-border:hover {
    box-shadow: 0 0 10px #00ff00,
               0 0 20px #00ff00,
               0 0 40px #00ff00;
    text-shadow: 0 0 10px #00ff00;
}

17. Efeito Bubble

HTML:

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

CSS:

.btn-bubble {
    background: #ff4081;
    color: white;
    position: relative;
    overflow: hidden;
}

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

.btn-bubble:hover::before {
    width: 400px;
    height: 400px;
}

18. Efeito Slice

HTML:

<button class="demo-btn btn-slice">Slice</button>

CSS:

.btn-slice {
    background: #2196F3;
    color: white;
    position: relative;
    overflow: hidden;
}

.btn-slice::before,
.btn-slice::after {
    content: '';
    position: absolute;
    background: rgba(255,255,255,0.2);
    top: 0;
    width: 0;
    height: 100%;
    transition: width 0.4s;
}

.btn-slice::before { left: 0; }
.btn-slice::after { right: 0; }

.btn-slice:hover::before,
.btn-slice:hover::after {
    width: 50%;
}

19. Efeito Pixel

HTML:

<button class="demo-btn btn-pixel">Pixel</button>

CSS:

.btn-pixel {
    background: #333;
    color: white;
    clip-path: polygon(
        0 10px,
        10px 0,
        calc(100% - 10px) 0,
        100% 10px,
        100% calc(100% - 10px),
        calc(100% - 10px) 100%,
        10px 100%,
        0 calc(100% - 10px)
    );
    transition: clip-path 0.3s;
}

.btn-pixel:hover {
    clip-path: polygon(
        0 0,
        0 0,
        100% 0,
        100% 0,
        100% 100%,
        100% 100%,
        0 100%,
        0 100%
    );
}

20. Efeito Shadow Pulse

HTML:

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

CSS:

.btn-shadow-pulse {
    background: #9c27b0;
    color: white;
    animation: shadowPulse 2s infinite;
}

@keyframes shadowPulse {
    0% { box-shadow: 0 0 0 0 rgba(156, 39, 176, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(156, 39, 176, 0); }
    100% { box-shadow: 0 0 0 0 rgba(156, 39, 176, 0); }
}

21. Efeito Ghost

HTML:

<button class="demo-btn btn-ghost">Ghost</button>

CSS:

.btn-ghost {
    background: transparent;
    border: 2px solid #607d8b;
    color: #607d8b;
    transition: all 0.3s;
}

.btn-ghost:hover {
    background: #607d8b;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

22. Efeito Diagonal Swipe

HTML:

<button class="demo-btn btn-diagonal-swipe">Diagonal Swipe</button>

CSS:

.btn-diagonal-swipe {
    background: #c0392b;
    color: white;
    border: none;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-diagonal-swipe::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        transparent 0%,
        transparent 50%,
        rgba(255,255,255,0.2) 50%,
        rgba(255,255,255,0.2) 100%
    );
    transition: all 0.5s ease;
    z-index: -1;
}

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

23. Efeito Text Reveal

HTML:

<button class="demo-btn btn-text-reveal" data-text="Hover Me">Text Reveal</button>

CSS:

.btn-text-reveal {
    background: #009688;
    color: transparent;
    position: relative;
}

.btn-text-reveal::before {
    content: attr(data-text);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    opacity: 0;
    transition: opacity 0.3s;
}

.btn-text-reveal:hover {
    color: transparent;
}

.btn-text-reveal:hover::before {
    opacity: 1;
}

24. Efeito Border Draw

HTML:

<button class="demo-btn btn-border-draw">Border Draw</button>

CSS:

.btn-border-draw {
    background: none;
    border: 2px solid #3f51b5;
    color: #3f51b5;
    position: relative;
    transition: color 0.3s;
}

.btn-border-draw::before,
.btn-border-draw::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 2px solid transparent;
    transition: width 0.3s, height 0.3s;
}

.btn-border-draw::before {
    top: 0;
    left: 0;
    border-top-color: #3f51b5;
    border-right-color: #3f51b5;
}

.btn-border-draw::after {
    bottom: 0;
    right: 0;
    border-bottom-color: #3f51b5;
    border-left-color: #3f51b5;
}

.btn-border-draw:hover::before,
.btn-border-draw:hover::after {
    width: 100%;
    height: 100%;
}

25. Efeito Shockwave

HTML:

<button class="demo-btn btn-shockwave">Shockwave</button>

CSS:

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

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

.btn-shockwave:active::before {
    width: 300px;
    height: 300px;
    opacity: 0;
    transition: 0s;
}

26. Efeito Scale Up

HTML:

<button class="demo-btn btn-scale-up">Scale Up</button>

CSS:

.btn-scale-up {
    background: #8bc34a;
    color: white;
    transform: scale(1);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-scale-up:hover {
    transform: scale(1.2);
}

27. Efeito Rainbow

HTML:

<button class="demo-btn btn-rainbow">Rainbow</button>

CSS:

.btn-rainbow {
    background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8f00ff);
    background-size: 700% 100%;
    color: white;
    animation: rainbow 6s linear infinite;
}

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

28. Efeito Flip

HTML:

<button class="demo-btn btn-flip">Flip</button>

CSS:

.btn-flip {
    background: #e91e63;
    color: white;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.btn-flip:hover {
    transform: rotateX(360deg);
}

29. Efeito Elastic

HTML:

<button class="demo-btn btn-elastic">Elastic</button>

CSS:

.btn-elastic {
    background: #9c27b0;
    color: white;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

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

.btn-elastic:active {
    transform: scale(0.95, 1.05);
}

30. Efeito Jelly

HTML:

<button class="demo-btn btn-jelly">Jelly</button>

CSS:

.btn-jelly {
    background: #ff9800;
    color: white;
    animation: none;
}

.btn-jelly:hover {
    animation: jelly 0.5s;
}

@keyframes jelly {
    0%, 100% { transform: scale(1, 1); }
    25% { transform: scale(0.95, 1.05); }
    50% { transform: scale(1.05, 0.95); }
    75% { transform: scale(0.98, 1.02); }
}

31. Efeito Glow

HTML:

<button class="demo-btn btn-glow">Glow</button>

CSS:

.btn-glow {
    background: #00bcd4;
    color: white;
    animation: glow 2s infinite;
}

@keyframes glow {
    0%, 100% { box-shadow: 0 0 5px #00bcd4, 0 0 10px #00bcd4, 0 0 15px #00bcd4; }
    50% { box-shadow: 0 0 10px #00bcd4, 0 0 20px #00bcd4, 0 0 30px #00bcd4; }
}

Botão c/ ícone

HTML:

<button class="demo-btn btn-icon">
    <i class="fas fa-arrow-right"></i>
    Next
</button>

<button class="demo-btn btn-icon icon-spin">
    <i class="fas fa-cog"></i>
    Settings
</button>

<button class="demo-btn btn-icon icon-pop">
    <i class="fas fa-heart"></i>
    Like
</button>

CSS:

.btn-icon {
    background: #4CAF50;
    color: white;
    padding: 12px 24px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.btn-icon i {
    transform: translateX(-3px);
    transition: transform 0.3s ease;
}

.btn-icon:hover {
    background: #45a049;
}

.btn-icon:hover i {
    transform: translateX(3px);
}

.btn-icon.icon-spin i {
    transition: transform 0.3s ease;
}

.btn-icon.icon-spin:hover i {
    transform: rotate(180deg);
}

.btn-icon.icon-pop {
    position: relative;
}

.btn-icon.icon-pop i {
    transition: all 0.3s ease;
}

.btn-icon.icon-pop:hover i {
    transform: scale(1.2);
}

Efeito Pixel

HTML:

<button class="demo-btn btn-pixel">Pixel</button>

CSS:

.btn-pixel {
    background: linear-gradient(45deg, #2ecc71, #27ae60);
    color: white;
    border: none;
    position: relative;
    font-weight: bold;
}

.btn-pixel:hover {
    animation: pixelate 0.4s infinite;
}

@keyframes pixelate {
    0% {
        background-size: 100% 100%;
        background-image: linear-gradient(45deg, #2ecc71, #27ae60);
    }
    25% {
        background-size: 20px 20px;
        background-image: 
            linear-gradient(90deg, #2ecc71 50%, #27ae60 50%),
            linear-gradient(90deg, #27ae60 50%, #2ecc71 50%);
    }
    50% {
        background-size: 10px 10px;
        background-image: 
            linear-gradient(90deg, #27ae60 50%, #2ecc71 50%),
            linear-gradient(90deg, #2ecc71 50%, #27ae60 50%);
    }
    75% {
        background-size: 20px 20px;
        background-image: 
            linear-gradient(90deg, #2ecc71 50%, #27ae60 50%),
            linear-gradient(90deg, #27ae60 50%, #2ecc71 50%);
    }
    100% {
        background-size: 100% 100%;
        background-image: linear-gradient(45deg, #2ecc71, #27ae60);
    }
}