A good hover effect on a button isn’t just cosmetic – it signals to the user that the element is interactive and responsive. A static button with no visual feedback feels flat and lifeless.
In this post, I’ll showcase 43 creative hover effects for buttons. From 10 practical, stylish effects that fit any project, to 33 bold, experimental ones using @property, clip-path, gradient animations, backdrop-filter, and other modern CSS techniques.
Note: Hover effects only work on desktop. I recommend viewing these examples from a computer, not a mobile device.
Practical Buttons with Style
10 effects that look polished and professional, suitable for real-world interfaces.
1. Glass Shift
A frosted glass button with backdrop-filter that lifts on hover.
.btn {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 10px;
color: #e0e6ed;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn:hover {
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.35);
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}<button class="btn">Hover Me</button>2. Ember Press
A 3D button that presses inward with a warm glowing halo.
.btn {
background: #c0560a;
border-radius: 6px;
color: #fff;
font-weight: 600;
box-shadow: 0 6px 0 #8b3d06, 0 8px 20px rgba(192, 86, 10, 0.3);
transition: all 0.15s ease;
}
.btn:hover {
transform: translateY(6px);
box-shadow: 0 0 0 #8b3d06, 0 2px 8px rgba(192, 86, 10, 0.4),
0 0 30px rgba(255, 140, 50, 0.25);
}<button class="btn">Hover Me</button>3. Ink Spread
A dark circle that expands from the center and fills the button.
.btn {
border: 2px solid #2c2c2c;
border-radius: 4px;
color: #2c2c2c;
font-weight: 600;
position: relative;
z-index: 1;
overflow: hidden;
}
.btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: #2c2c2c;
transform: translate(-50%, -50%);
transition: width 0.5s ease, height 0.5s ease;
z-index: -1;
}
.btn:hover::before {
width: 340px;
height: 340px;
}
.btn:hover {
color: #faf3e8;
}<button class="btn">Hover Me</button>4. Velvet Sweep
A left-to-right fill with a rich purple gradient.
.btn {
border: 1px solid #9b4dca;
border-radius: 4px;
color: #c084fc;
position: relative;
z-index: 1;
overflow: hidden;
}
.btn::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, #7c3aed, #a855f7);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
z-index: -1;
}
.btn:hover::before {
transform: scaleX(1);
}
.btn:hover {
color: #fff;
}<button class="btn">Hover Me</button>5. Wire Frame
Corner brackets that grow into a full border on hover.
.btn {
color: #a0a0a0;
position: relative;
}
.btn::before, .btn::after {
content: '';
position: absolute;
width: 14px;
height: 14px;
border: 2px solid #666;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn::before {
top: 4px; left: 4px;
border-right: none; border-bottom: none;
}
.btn::after {
bottom: 4px; right: 4px;
border-left: none; border-top: none;
}
.btn:hover::before, .btn:hover::after {
width: calc(100% - 8px);
height: calc(100% - 8px);
border-color: #00ff88;
}
.btn:hover {
color: #00ff88;
}<button class="btn">Hover Me</button>6. Pulse Ring
An outline ring that pulses outward from the button.
.btn {
border: 2px solid #64ffda;
border-radius: 50px;
color: #64ffda;
background: transparent;
}
.btn:hover {
animation: pulse 1s ease-out;
box-shadow: 0 0 20px rgba(100, 255, 218, 0.15);
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(100, 255, 218, 0.5); }
100% { box-shadow: 0 0 0 16px rgba(100, 255, 218, 0); }
}<button class="btn">Hover Me</button>7. Silk Slide
The text slides up and new text enters from below.
.btn {
background: #e63946;
border-radius: 4px;
color: #fff;
overflow: hidden;
position: relative;
}
.btn span {
display: inline-block;
transition: transform 0.35s ease, opacity 0.35s ease;
}
.btn::after {
content: attr(data-hover);
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, 80%);
opacity: 0;
transition: transform 0.35s ease, opacity 0.35s ease;
}
.btn:hover span {
transform: translateY(-130%);
opacity: 0;
}
.btn:hover::after {
transform: translate(-50%, -50%);
opacity: 1;
}<button class="btn" data-hover="Click!"><span>Hover Me</span></button>8. Horizon Line
Top and bottom lines that grow outward from the center.
.btn {
color: #8ec5fc;
padding: 16px 36px;
position: relative;
}
.btn::before, .btn::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
height: 2px;
width: 0;
background: #8ec5fc;
transition: width 0.4s ease;
}
.btn::before { top: 0; }
.btn::after { bottom: 0; }
.btn:hover::before, .btn:hover::after {
width: 100%;
}
.btn:hover {
color: #fff;
}<button class="btn">Hover Me</button>9. Matte Flip
A color inversion – background and text swap places.
.btn {
background: #2c2c2c;
border-radius: 6px;
color: #e8e0d4;
font-weight: 600;
border: 2px solid #2c2c2c;
transition: all 0.3s ease;
}
.btn:hover {
background: #e8e0d4;
color: #2c2c2c;
}<button class="btn">Hover Me</button>10. Shadow Stack
A retro shadow that flattens on press – a tactile button effect.
.btn {
background: #fff;
border: 2px solid #333;
color: #333;
font-weight: 600;
box-shadow: 5px 5px 0 #333;
transition: all 0.15s ease;
}
.btn:hover {
box-shadow: 0 0 0 #333;
transform: translate(5px, 5px);
}<button class="btn">Hover Me</button>Creative, Bold & Experimental Effects
Now for the fun part. 33 effects that push the boundaries with animated gradients, clip-path, @property, neon, glitch, and more.
11. Aurora Border
An animated border with a rotating conic-gradient powered by @property.
@property --angle {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}
.btn {
color: #e0e0e0;
border-radius: 8px;
background: #141428;
position: relative;
z-index: 1;
--angle: 0deg;
}
.btn::before {
content: '';
position: absolute;
inset: -2px;
border-radius: 10px;
background: conic-gradient(
from var(--angle),
#ff006e, #fb5607, #ffbe0b, #8338ec, #3a86ff, #ff006e
);
z-index: -2;
opacity: 0;
transition: opacity 0.3s;
}
.btn::after {
content: '';
position: absolute;
inset: 2px;
border-radius: 6px;
background: #141428;
z-index: -1;
}
.btn:hover::before {
opacity: 1;
animation: spin 2s linear infinite;
}
@keyframes spin {
to { --angle: 360deg; }
}<button class="btn">Hover Me</button>12. Neon Surge
Intense cyan neon with layered glow and intensifying text-shadow.
.btn {
border: 1px solid #0ff;
color: #0ff;
border-radius: 4px;
text-shadow: 0 0 6px rgba(0, 255, 255, 0.4);
transition: all 0.3s ease;
}
.btn:hover {
box-shadow:
0 0 10px rgba(0, 255, 255, 0.6),
0 0 40px rgba(0, 255, 255, 0.3),
0 0 80px rgba(0, 255, 255, 0.1),
inset 0 0 20px rgba(0, 255, 255, 0.08);
text-shadow:
0 0 8px #0ff,
0 0 20px rgba(0, 255, 255, 0.5);
color: #fff;
}<button class="btn">Hover Me</button>13. Cyberpunk Clip
An angled cut with clip-path that fills with glow on hover.
.btn {
border: 1px solid #ff2a6d;
color: #ff2a6d;
clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
text-transform: uppercase;
letter-spacing: 2px;
position: relative;
z-index: 1;
overflow: hidden;
}
.btn::before {
content: '';
position: absolute;
inset: 0;
background: #ff2a6d;
clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
opacity: 0;
transition: opacity 0.3s;
z-index: -1;
}
.btn:hover::before {
opacity: 1;
}
.btn:hover {
color: #fff;
box-shadow: 0 0 30px rgba(255, 42, 109, 0.3);
}<button class="btn">Hover Me</button>14. Glitch Tremor
A glitch effect with RGB splitting and controlled tremors.
.btn {
background: #1a1a2e;
border: 1px solid #e94560;
color: #e94560;
font-family: 'Courier New', monospace;
}
.btn:hover {
animation: glitch 0.3s steps(2) infinite;
}
@keyframes glitch {
0% { transform: translate(0); text-shadow: none; }
20% { transform: translate(-3px, 2px);
text-shadow: 3px 0 #00f0ff, -3px 0 #e94560; }
40% { transform: translate(3px, -2px);
text-shadow: -2px 0 #e94560, 2px 0 #00f0ff; }
60% { transform: translate(-1px, -1px); }
80% { transform: translate(2px, 1px);
text-shadow: -3px 0 #e94560, 3px 0 #00f0ff; }
100% { transform: translate(0); text-shadow: none; }
}<button class="btn">Hover Me</button>15. Liquid Morph
The button warps into an organic shape with morphing border-radius.
.btn {
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 12px;
color: #fff;
transition: border-radius 0.6s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.4s ease,
box-shadow 0.4s ease;
}
.btn:hover {
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
transform: scale(1.05) rotate(-2deg);
box-shadow: 0 10px 40px rgba(118, 75, 162, 0.4);
}<button class="btn">Hover Me</button>16. Prismatic Shift
A gradient that continuously shifts hue via @property.
@property --hue {
syntax: '<number>';
initial-value: 0;
inherits: false;
}
.btn {
--hue: 0;
background: hsl(calc(var(--hue) + 280), 70%, 55%);
border-radius: 6px;
color: #fff;
font-weight: 600;
}
.btn:hover {
animation: prismatic 2.5s linear infinite;
transform: scale(1.04);
}
@keyframes prismatic {
to { --hue: 360; }
}<button class="btn">Hover Me</button>17. Magnetic Field
The button tracks the cursor with a radial glow that follows mouse movement (requires JS).
.btn {
background: #21262d;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
color: #c9d1d9;
transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
box-shadow 0.3s ease;
}
.btn:hover {
border-color: rgba(136, 198, 255, 0.3);
box-shadow: 0 0 20px rgba(136, 198, 255, 0.08);
background: radial-gradient(
circle at var(--mx, 50%) var(--my, 50%),
rgba(136, 198, 255, 0.12) 0%,
transparent 60%
) #21262d;
}btn.addEventListener('mousemove', function (e) {
var r = btn.getBoundingClientRect();
btn.style.setProperty('--mx', ((e.clientX - r.left) / r.width * 100) + '%');
btn.style.setProperty('--my', ((e.clientY - r.top) / r.height * 100) + '%');
});<button class="btn">Hover Me</button>18. Terminal Scan
A green scan line sweeps across the button – terminal aesthetics.
.btn {
background: rgba(0, 255, 65, 0.05);
border: 1px solid rgba(0, 255, 65, 0.3);
color: #00ff41;
font-family: 'Courier New', monospace;
text-transform: uppercase;
position: relative;
z-index: 1;
}
.btn::after {
content: '';
position: absolute;
top: -100%;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
transparent 30%,
rgba(0, 255, 65, 0.2) 50%,
transparent 70%
);
z-index: -1;
}
.btn:hover::after {
animation: scan 1.2s ease-in-out infinite;
}
.btn:hover {
text-shadow: 0 0 8px rgba(0, 255, 65, 0.6);
}
@keyframes scan {
0% { top: -100%; }
100% { top: 200%; }
}<button class="btn">EXECUTE</button>19. Holographic Foil
An iridescent gradient that continuously shifts hues.
.btn {
background: linear-gradient(
135deg,
hsl(300, 80%, 60%),
hsl(200, 80%, 60%),
hsl(60, 80%, 60%),
hsl(120, 80%, 60%),
hsl(300, 80%, 60%)
);
background-size: 400% 400%;
border-radius: 8px;
color: #fff;
font-weight: 600;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.btn:hover {
animation: holo 3s ease infinite;
transform: scale(1.03);
}
@keyframes holo {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}<button class="btn">Hover Me</button>20. Diamond Shatter
A diamond shape that shatters into a rectangle with clip-path.
.btn {
background: linear-gradient(135deg, #f72585, #b5179e);
color: #fff;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
width: 130px;
height: 130px;
transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn:hover {
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
box-shadow: 0 8px 30px rgba(247, 37, 133, 0.3);
}<button class="btn">Hover Me</button>21. Conic Spotlight
A rotating spotlight powered by conic-gradient and @property.
@property --angle {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}
.btn {
--angle: 0deg;
background: conic-gradient(
from var(--angle),
transparent 0%,
rgba(255, 200, 50, 0.2) 10%,
transparent 20%
), #1a1a2a;
border: 1px solid rgba(255, 200, 50, 0.2);
border-radius: 6px;
color: #ffc832;
}
.btn:hover {
animation: spotlight 2s linear infinite;
}
@keyframes spotlight {
to { --angle: 360deg; }
}<button class="btn">Hover Me</button>22. Stitch Craft
An animated stitching effect with a dashed outline that tightens.
.btn {
background: #c1440e;
color: #ffeedd;
border-radius: 6px;
outline: 2px dashed transparent;
outline-offset: -7px;
transition: outline-color 0.3s, outline-offset 0.3s;
}
.btn:hover {
outline-color: rgba(255, 238, 221, 0.7);
outline-offset: -5px;
}<button class="btn">Hover Me</button>23. Smoke Trail
Layered shadows that spread downward like smoke trails.
.btn {
background: #fff;
color: #141414;
font-weight: 700;
border-radius: 4px;
transition: all 0.2s ease;
}
.btn:hover {
box-shadow:
0 2px 0 rgba(255, 255, 255, 0.7),
0 5px 0 rgba(255, 255, 255, 0.5),
0 9px 0 rgba(255, 255, 255, 0.3),
0 14px 0 rgba(255, 255, 255, 0.15),
0 20px 0 rgba(255, 255, 255, 0.06);
transform: translateY(-4px);
}<button class="btn">Hover Me</button>24. Venetian Reveal
A horizontal stripe pattern that appears on hover like a Venetian blind.
.btn {
border: 1px solid rgba(255, 255, 255, 0.15);
color: #ccd6e0;
position: relative;
z-index: 1;
}
.btn::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
to bottom,
#4a90d9 0px, #4a90d9 3px,
transparent 3px, transparent 8px
);
opacity: 0;
transition: opacity 0.4s ease;
z-index: -1;
}
.btn:hover::before {
opacity: 1;
}
.btn:hover {
border-color: #4a90d9;
color: #fff;
}<button class="btn">Hover Me</button>25. Brutalist Shake
An aggressive shake with thick borders – brutalist aesthetics.
.btn {
background: #000;
border: 3px solid #000;
color: #f0e68c;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 2px;
}
.btn:hover {
animation: shake 0.4s steps(4) infinite;
background: #f0e68c;
color: #000;
}
@keyframes shake {
0% { transform: translate(0); }
25% { transform: translate(-4px, 3px) rotate(-1deg); }
50% { transform: translate(4px, -2px) rotate(1deg); }
75% { transform: translate(-2px, -3px); }
100% { transform: translate(0); }
}<button class="btn">Hover Me</button>26. Warp Drive
A zoom-in illusion with perspective rotation.
.btn {
background: linear-gradient(135deg, #3a0ca3, #4361ee);
border-radius: 6px;
color: #fff;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.5s ease;
}
.btn:hover {
transform: perspective(600px) rotateY(-10deg) scale(1.08);
box-shadow: 12px 6px 30px rgba(67, 97, 238, 0.35);
}<button class="btn">Hover Me</button>27. Paper Fold
A corner that folds back to reveal a darker color underneath.
.btn {
background: #4a7c59;
color: #e8f5e9;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition: clip-path 0.4s ease;
}
.btn:hover {
clip-path: polygon(
0 0, 100% 0,
100% calc(100% - 16px),
calc(100% - 16px) 100%,
0 100%
);
}<button class="btn">Hover Me</button>28. Chromatic Ring
A double border with chromatic aberration in red and blue.
.btn {
color: #e0e0e0;
border-radius: 6px;
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
.btn:hover {
box-shadow:
inset 0 0 0 2px rgba(255, 255, 255, 0.6),
3px 3px 0 0 rgba(255, 50, 50, 0.5),
-3px -3px 0 0 rgba(50, 100, 255, 0.5);
color: #fff;
}<button class="btn">Hover Me</button>29. Particle Burst
Particles that scatter outward from the button via pseudo-elements.
.btn {
background: rgba(168, 85, 247, 0.15);
border: 1px solid rgba(168, 85, 247, 0.4);
border-radius: 6px;
color: #c084fc;
position: relative;
z-index: 1;
}
.btn::before, .btn::after {
content: '';
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background: #a855f7;
opacity: 0;
z-index: -1;
}
.btn::before { top: 50%; left: 25%; }
.btn::after { top: 40%; right: 25%; }
.btn:hover::before {
animation: p1 0.6s ease-out forwards;
}
.btn:hover::after {
animation: p2 0.6s ease-out 0.05s forwards;
}
@keyframes p1 {
0% { transform: translate(0, 0) scale(1); opacity: 1; }
100% { transform: translate(-28px, -35px) scale(0); opacity: 0; }
}
@keyframes p2 {
0% { transform: translate(0, 0) scale(1); opacity: 1; }
100% { transform: translate(28px, -30px) scale(0); opacity: 0; }
}<button class="btn">Hover Me</button>30. Supernova
A radial explosion powered by @property that simulates a supernova.
@property --scale {
syntax: '<number>';
initial-value: 0;
inherits: false;
}
.btn {
--scale: 0;
background: radial-gradient(
circle at center,
rgba(255, 100, 50, calc(var(--scale) * 0.4)) 0%,
rgba(255, 50, 80, calc(var(--scale) * 0.2)) 40%,
transparent 70%
), #1a1020;
border: 1px solid rgba(255, 100, 50, 0.3);
border-radius: 50px;
color: #ffb088;
transition: --scale 0.5s ease,
box-shadow 0.5s ease;
}
.btn:hover {
--scale: 1;
box-shadow:
0 0 20px rgba(255, 100, 50, 0.3),
0 0 60px rgba(255, 50, 80, 0.15);
color: #fff;
}<button class="btn">Hover Me</button>31. Lava Lamp
An organic blob that continuously morphs its shape – a warm gradient revealed with morphing border-radius.
.btn {
background: #6b21a8;
border-radius: 50px;
color: #e9d5ff;
font-weight: 600;
position: relative;
z-index: 1;
}
.btn::before {
content: '';
position: absolute;
inset: 0;
border-radius: 50px;
background: linear-gradient(135deg, #f97316, #ec4899, #8b5cf6);
opacity: 0;
transition: opacity 0.4s;
z-index: -1;
animation: lava 4s ease-in-out infinite;
}
.btn:hover::before {
opacity: 1;
}
@keyframes lava {
0% { border-radius: 50px; }
25% { border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%; }
50% { border-radius: 60% 40% 40% 60% / 40% 60% 40% 60%; }
75% { border-radius: 40% 60% 50% 50% / 50% 50% 60% 40%; }
100% { border-radius: 50px; }
}<button class="btn">Hover Me</button>32. Frost Bite
An ice effect – the border whitens, letter-spacing expands, and the button freezes.
.btn {
background: rgba(147, 197, 253, 0.08);
border: 2px solid rgba(147, 197, 253, 0.3);
border-radius: 8px;
color: #93c5fd;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn:hover {
background: rgba(147, 197, 253, 0.15);
border-color: #fff;
color: #fff;
box-shadow:
0 0 15px rgba(147, 197, 253, 0.4),
0 0 40px rgba(147, 197, 253, 0.2),
inset 0 0 15px rgba(200, 220, 255, 0.1);
text-shadow: 0 0 8px rgba(200, 230, 255, 0.6);
letter-spacing: 2px;
}<button class="btn">Hover Me</button>33. Circuit Board
Lines that race along the button like a circuit board – tech aesthetics.
.btn {
background: rgba(34, 197, 94, 0.06);
border: 1px solid rgba(34, 197, 94, 0.25);
color: #4ade80;
font-family: 'Courier New', monospace;
text-transform: uppercase;
position: relative;
}
.btn::before, .btn::after {
content: '';
position: absolute;
background: #22c55e;
height: 2px;
width: 0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn::before { top: 0; left: 0; }
.btn::after { bottom: 0; right: 0; }
.btn:hover::before, .btn:hover::after {
width: 100%;
box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
}
.btn:hover {
border-color: #22c55e;
color: #fff;
}<button class="btn">Hover Me</button>34. Solar Eclipse
A dark circle that shrinks to reveal a blazing gradient underneath – like a solar eclipse.
.btn {
background: linear-gradient(135deg, #f59e0b, #ef4444);
border-radius: 50px;
color: #fff;
position: relative;
overflow: hidden;
z-index: 1;
}
.btn::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50px;
background: #0a0610;
transform: scale(1);
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
z-index: -1;
}
.btn:hover::after {
transform: scale(0);
}
.btn:hover {
box-shadow:
0 0 30px rgba(245, 158, 11, 0.5),
0 0 60px rgba(239, 68, 68, 0.3);
}<button class="btn">Hover Me</button>35. Typewriter Strike
letter-spacing compresses like a typewriter strike – with a sharp color inversion.
.btn {
background: #1a1a1a;
color: #f7f3ee;
border: 2px solid #1a1a1a;
font-family: 'Courier New', monospace;
font-weight: 700;
letter-spacing: 6px;
text-transform: uppercase;
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn:hover {
letter-spacing: 1px;
background: #f7f3ee;
color: #1a1a1a;
transform: scale(0.97);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}<button class="btn">Hover Me</button>36. Gravity Well
The button gets pulled downward as if gravity is acting on it – with an expanding shadow.
.btn {
background: linear-gradient(180deg, #818cf8, #6366f1);
border-radius: 10px;
color: #fff;
font-weight: 600;
box-shadow: 0 4px 0 #4338ca, 0 6px 16px rgba(99, 102, 241, 0.25);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn:hover {
transform: translateY(4px) scale(0.98);
box-shadow: 0 0 0 #4338ca, 0 2px 40px rgba(99, 102, 241, 0.5);
border-radius: 14px;
background: linear-gradient(180deg, #6366f1, #4f46e5);
}<button class="btn">Hover Me</button>37. Neon Sign Flicker
An off neon sign that flickers to life with an authentic flicker when hovered.
.btn {
background: transparent;
border: 2px solid rgba(251, 146, 60, 0.3);
border-radius: 4px;
color: rgba(251, 146, 60, 0.5);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px;
}
.btn:hover {
animation: flicker 0.15s ease-in-out 2,
glow 0.3s ease 0.3s forwards;
}
@keyframes flicker {
0%, 100% { color: rgba(251, 146, 60, 0.5); text-shadow: none; }
50% { color: #fb923c;
text-shadow: 0 0 10px #fb923c, 0 0 30px rgba(251, 146, 60, 0.5); }
}
@keyframes glow {
to { color: #fff; border-color: #fb923c;
text-shadow: 0 0 10px #fb923c, 0 0 40px rgba(251, 146, 60, 0.6);
box-shadow: 0 0 15px rgba(251, 146, 60, 0.4); }
}<button class="btn">Hover Me</button>38. X-Ray Scan
A scan bar sweeps across the button and inverts the colors – like an X-ray.
.btn {
background: #1a1a2e;
border: 2px solid #1a1a2e;
border-radius: 6px;
color: #f0f0f0;
font-weight: 600;
overflow: hidden;
position: relative;
z-index: 1;
transition: all 0.4s ease;
}
.btn::before {
content: '';
position: absolute;
top: 0; left: -100%;
width: 100%; height: 100%;
background: linear-gradient(90deg,
transparent 30%, rgba(255, 255, 255, 0.9) 48%,
rgba(255, 255, 255, 0.9) 52%, transparent 70%);
z-index: 1;
}
.btn:hover::before {
animation: xray 0.8s ease-in-out forwards;
}
.btn:hover {
background: #f0f0f0;
color: #1a1a2e;
}
@keyframes xray {
0% { left: -100%; }
100% { left: 100%; }
}<button class="btn">Hover Me</button>39. Molten Edge
The bottom edge of the button glows like molten metal with a fiery halo.
.btn {
background: #2a1a14;
border: 2px solid rgba(234, 88, 12, 0.2);
border-radius: 6px;
color: #fdba74;
transition: all 0.5s ease;
}
.btn:hover {
border-color: #ea580c;
color: #fff;
box-shadow:
0 4px 0 #ea580c,
0 6px 20px rgba(234, 88, 12, 0.4),
0 12px 40px rgba(234, 88, 12, 0.2),
inset 0 -8px 16px rgba(234, 88, 12, 0.15);
background: linear-gradient(180deg, #2a1a14, #3d1e10);
text-shadow: 0 0 8px rgba(234, 88, 12, 0.5);
}<button class="btn">Hover Me</button>40. Dimension Rift
A glowing crack opens at the center of the button – like a dimensional rift.
.btn {
background: linear-gradient(135deg, #312e81, #4338ca);
border-radius: 8px;
color: #c7d2fe;
font-weight: 600;
overflow: hidden;
position: relative;
z-index: 1;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn::before {
content: '';
position: absolute;
left: 50%; top: 0;
width: 0; height: 100%;
background: linear-gradient(90deg,
transparent, rgba(167, 139, 250, 0.3) 30%,
rgba(255, 255, 255, 0.8) 50%,
rgba(167, 139, 250, 0.3) 70%, transparent);
transform: translateX(-50%);
transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
z-index: -1;
}
.btn:hover::before {
width: 120%;
}
.btn:hover {
color: #fff;
box-shadow: 0 0 30px rgba(99, 102, 241, 0.4),
0 0 60px rgba(139, 92, 246, 0.2);
transform: scale(1.05);
letter-spacing: 2px;
}<button class="btn">Hover Me</button>41. Spark Shower
A shower of sparks raining across the button like hot metal – with an orange glow from below.
.btn {
background:
repeating-linear-gradient(
90deg,
transparent 0px, transparent 3px,
rgba(251, 191, 36, 0.06) 3px,
rgba(251, 191, 36, 0.06) 4px
),
linear-gradient(180deg, #3a3028, #2a2018);
background-size: 4px 100%, 100% 100%;
border: 1px solid rgba(251, 146, 60, 0.3);
border-radius: 6px;
color: #fdba74;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3),
inset 0 -6px 16px rgba(251, 146, 60, 0.05);
}
.btn:hover {
background:
repeating-linear-gradient(
90deg,
transparent 0px, transparent 3px,
rgba(251, 191, 36, 0.15) 3px,
rgba(251, 191, 36, 0.15) 4px
),
linear-gradient(180deg, #4a3828, #3a2818);
background-size: 4px 100%, 100% 100%;
border-color: #fb923c;
color: #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3),
inset 0 -10px 24px rgba(251, 146, 60, 0.2),
0 6px 30px rgba(251, 146, 60, 0.25);
animation: sparks 0.8s steps(3) infinite;
}
@keyframes sparks {
0% { background-position: 0 0, 0 0; }
33% { background-position: 2px -4px, 0 0; }
66% { background-position: -1px -8px, 0 0; }
100% { background-position: 1px -12px, 0 0; }
}<button class="btn">Hover Me</button>42. Confetti Pop
A color party – the background explodes with a wild gradient that bounces between pink, yellow, teal, and purple.
.btn {
background: #fff;
border: 2px solid #e5e5e5;
border-radius: 10px;
color: #333;
font-weight: 600;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn:hover {
background: linear-gradient(135deg, #ec4899, #fbbf24, #14b8a6, #8b5cf6);
background-size: 400% 400%;
animation: confetti 2s ease infinite;
border-color: #ec4899;
color: #fff;
font-weight: 700;
transform: scale(1.06);
box-shadow: 0 8px 30px rgba(236, 72, 153, 0.3);
}
@keyframes confetti {
0% { background-position: 0% 50%; border-color: #ec4899; }
25% { background-position: 50% 0%; border-color: #fbbf24; }
50% { background-position: 100% 50%; border-color: #14b8a6; }
75% { background-position: 50% 100%; border-color: #8b5cf6; }
100% { background-position: 0% 50%; border-color: #ec4899; }
}<button class="btn">Hover Me</button>43. Nebula Dust
A pulsating nebula halo that surrounds the button with layers of purple, blue, and pink glow.
.btn {
background: rgba(139, 92, 246, 0.08);
border: 1px solid rgba(139, 92, 246, 0.3);
border-radius: 10px;
color: #c4b5fd;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(4px);
}
.btn:hover {
background: rgba(139, 92, 246, 0.12);
border-color: rgba(167, 139, 250, 0.5);
color: #fff;
animation: nebula 2.5s ease-in-out infinite;
}
@keyframes nebula {
0%, 100% {
box-shadow:
0 0 12px rgba(139, 92, 246, 0.5),
0 0 30px rgba(59, 130, 246, 0.3),
0 0 60px rgba(236, 72, 153, 0.15);
}
33% {
box-shadow:
0 0 18px rgba(139, 92, 246, 0.7),
0 0 40px rgba(59, 130, 246, 0.4),
0 0 80px rgba(236, 72, 153, 0.25);
}
66% {
box-shadow:
0 0 14px rgba(139, 92, 246, 0.55),
0 0 35px rgba(59, 130, 246, 0.35),
0 0 70px rgba(236, 72, 153, 0.2);
}
}<button class="btn">Hover Me</button>Bonus: CSS corner-shape Effects
These four effects use the new corner-shape property to create shapes that border-radius alone can’t produce. Since corner-shape is currently supported only in Chromium browsers (Chrome 139+, Edge 139+), you’ll see a notice if your browser doesn’t support it yet.
44. Squircle Reactor
A dormant reactor core. On hover the button inflates into a squircle while a spinning conic-gradient border ignites around it – the squircle shape makes the chromatic ring look distinctly organic compared to a regular rounded rectangle.
.btn {
background: #0a0a1a;
color: #e0d4ff;
border-radius: 18px;
corner-shape: round;
z-index: 1;
}
/* Spinning conic-gradient border */
.btn::before {
content: '';
position: absolute;
inset: -3px;
border-radius: 21px;
corner-shape: round;
background: conic-gradient(
from var(--angle),
#7c3aed, #ec4899, #f59e0b, #10b981, #3b82f6, #7c3aed
);
z-index: -2;
opacity: 0;
transition: corner-shape 0.6s, opacity 0.4s;
}
/* Inner fill to mask the gradient border */
.btn::after {
content: '';
position: absolute;
inset: 0;
border-radius: 18px;
corner-shape: round;
background: #0a0a1a;
z-index: -1;
transition: corner-shape 0.6s;
}
.btn:hover {
corner-shape: squircle;
border-radius: 26px;
transform: scale(1.04);
}
.btn:hover::before {
corner-shape: squircle;
border-radius: 29px;
opacity: 1;
animation: spin 1.8s linear infinite;
}
.btn:hover::after {
corner-shape: squircle;
border-radius: 26px;
}<button class="btn">Hover Me</button>45. Notch Lock
A HUD-style lock-on effect. Rectangular corners bite inward into sharp 90-degree notch cuts, like a targeting system locking onto its subject.
.btn {
background: rgba(0, 255, 136, 0.06);
border: 1px solid rgba(0, 255, 136, 0.3);
color: #00ff88;
border-radius: 0;
corner-shape: round;
font-family: 'Courier New', monospace;
text-transform: uppercase;
letter-spacing: 2px;
transition: corner-shape 0.35s, border-radius 0.35s,
border-color 0.35s, box-shadow 0.35s;
}
.btn:hover {
corner-shape: notch;
border-radius: 12px;
border-color: #00ff88;
color: #fff;
box-shadow:
0 0 12px rgba(0, 255, 136, 0.3),
inset 0 0 12px rgba(0, 255, 136, 0.06);
}<button class="btn">Hover Me</button>46. Scoop Vortex
All four corners cave inward aggressively into deep scoop curves while the button shrinks slightly and a radial light collapses toward the center – like matter being pulled into a gravitational well.
.btn {
background: linear-gradient(135deg, #7c3aed, #a855f7);
color: #fff;
border-radius: 8px;
corner-shape: round;
z-index: 1;
transition: corner-shape 0.5s cubic-bezier(0.4, 0, 0.2, 1),
border-radius 0.5s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.5s;
}
/* Collapsing radial light */
.btn::before {
content: '';
position: absolute;
inset: 0;
border-radius: 8px;
corner-shape: round;
background: radial-gradient(circle, rgba(255,255,255,0.25), transparent 60%);
opacity: 0;
transform: scale(1.6);
transition: corner-shape 0.5s, opacity 0.5s, transform 0.5s;
z-index: -1;
}
.btn:hover {
corner-shape: scoop;
border-radius: 28px;
transform: scale(0.95);
box-shadow:
0 0 30px rgba(124, 58, 237, 0.4),
inset 0 0 20px rgba(0, 0, 0, 0.3);
}
.btn:hover::before {
corner-shape: scoop;
border-radius: 28px;
opacity: 1;
transform: scale(0.4);
}<button class="btn">Hover Me</button>47. Bevel Shift
Clean and architectural. On hover the corners cut into diagonal bevel slices while the tracking widens, giving the text a premium engraved feel.
.btn {
background: #18181b;
color: #fafafa;
border-radius: 4px;
corner-shape: round;
transition: corner-shape 0.4s, border-radius 0.4s,
transform 0.3s, letter-spacing 0.3s;
}
.btn:hover {
corner-shape: bevel;
border-radius: 14px;
transform: translateY(-2px);
letter-spacing: 2px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}<button class="btn">Hover Me</button>FAQs
Common questions about CSS button hover effects:
What is the difference between transition and animation in CSS for hover effects?
transition defines a smooth change between two states when something changes (e.g., on hover). animation lets you define a complex multi-step sequence with @keyframes that can run continuously, loop, and offer full control over timing.
What does @property do in CSS and how does it help with hover effects?
@property lets you register a custom property with a specific type like <angle> or <number>. Thanks to this type declaration, the browser can interpolate (smoothly transition) the value - making it possible to animate gradients, angles, and colors in ways that simply don't work without @property.
Do hover effects work on mobile devices?
Not fully. Touchscreens don't have a real hover state because there's no cursor floating over elements. Some browsers simulate hover on the first tap, but it's unreliable. For mobile, prefer using
:active or click-triggered animations instead.
How does clip-path create interesting hover effects?
clip-path clips the visible shape of an element. When combined with transition, you can morph between shapes on hover - for example, from a diamond to a rectangle, or from an angled cut to a full shape. The shapes need the same number of points in polygon() for a smooth transition.
What is the right way to animate gradients in CSS?
CSS can't directly animate
background between two gradients. There are two main approaches: shift the background-position of a gradient that's larger than the element, or use @property to register the individual values that compose the gradient and animate them separately.
How do pseudo-elements help create hover effects?
::before and ::after add two extra layers to any element without additional HTML. You can position them behind the text with z-index: -1 and animate them independently - for example, a fill that slides in from the side, a circle expanding from the center, or particles scattering outward.Summary
We covered 43 button hover effects – from practical, polished ones like Glass Shift and Shadow Stack, to experimental effects like Aurora Border, Glitch Tremor, and Supernova that push what CSS can do.
All effects are built with pure CSS (except Magnetic Field, which needs a few lines of JS). Feel free to copy any effect and adapt it to your projects. If you enjoyed this post, check out my collection of image hover effects as well.
