Interactive Library
Extreme Button FX
Stunning hover effects and button states for next-level projects. Pure CSS. Infinite possibilities.
Glass Reflection
Stunning diagonal light shine on hover
Source Code
.btn-shine {
position: relative;
overflow: hidden;
background: #4f46e5;
color: white;
padding: 14px 28px;
border-radius: 12px;
}
.btn-shine::after {
content: "";
position: absolute;
top: -50%; left: -60%; width: 20%; height: 200%;
background: rgba(255, 255, 255, 0.4);
transform: rotate(30deg);
transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
.btn-shine:hover::after {
left: 120%;
}Inward Growth
Background fills in from sides
Source Code
.btn-fill {
z-index: 1;
position: relative;
background: transparent;
color: #4f46e5;
border: 2px solid #4f46e5;
overflow: hidden;
transition: color 0.4s ease;
}
.btn-fill::before {
content: "";
position: absolute;
z-index: -1;
top: 0; left: 0; width: 0; height: 100%;
background: #4f46e5;
transition: width 0.4s ease;
}
.btn-fill:hover::before {
width: 100%;
}
.btn-fill:hover {
color: white;
}Jelly Wobble
Squishy bouncy button effect
Source Code
.btn-jelly:hover {
animation: jelly 0.6s ease;
}
@keyframes jelly {
0% { transform: scale(1, 1); }
33% { transform: scale(1.15, 0.85); }
66% { transform: scale(0.85, 1.15); }
100% { transform: scale(1, 1); }
}Icon Reveal
Icon slides in from the right
Source Code
.btn-reveal {
padding-right: 40px;
background: #10b981;
color: white;
}
.btn-reveal span {
transition: transform 0.3s ease;
}
.btn-reveal i {
position: absolute;
right: -20px;
opacity: 0;
transition: all 0.3s ease;
}
.btn-reveal:hover i {
right: 15px;
opacity: 1;
}
.btn-reveal:hover span {
transform: translateX(-10px);
}Neon Border
Cycling neon border effect
Source Code
.btn-neon {
background: #000;
color: #fff;
border: 2px solid #00f3ff;
box-shadow: 0 0 5px #00f3ff;
transition: 0.5s;
}
.btn-neon:hover {
box-shadow: 0 0 20px #00f3ff, 0 0 60px #00f3ff;
text-shadow: 0 0 5px #00f3ff;
}Glitch Effect
Cyberpunk style glitch on hover
Source Code
.btn-glitch:hover {
animation: glitch 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
}
@keyframes glitch {
0% { transform: translate(0); }
20% { transform: translate(-3px, 3px); }
40% { transform: translate(-3px, -3px); }
60% { transform: translate(3px, 3px); }
80% { transform: translate(3px, -3px); }
100% { transform: translate(0); }
}Flowing Gradient
Background colors flow horizontally
Source Code
.btn-flow {
background: linear-gradient(90deg, #ff00cc, #3333ff, #ff00cc);
background-size: 200%;
color: white;
transition: 0.5s;
}
.btn-flow:hover {
background-position: right;
}Liquid Fill
Looks like water rising inside
Source Code
.btn-liquid {
position: relative;
background: #2196f3;
color: #fff;
overflow: hidden;
}
.btn-liquid span {
position: relative;
z-index: 1;
}
.btn-liquid::before {
content: '';
position: absolute;
top: 100%; left: 0; width: 100%; height: 100%;
background: #0d47a1;
transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 0;
}
.btn-liquid:hover::before {
top: 0;
}Shadow Pop
Pops out with a thick retro shadow
Source Code
.btn-pop:hover {
transform: translate(-4px, -4px);
box-shadow: 4px 4px 0px #000;
}
.btn-pop {
transition: all 0.2s;
border: 2px solid #000;
background: #fff;
color: #000;
}Pulse Glow
Double pulsing ring effect
Source Code
.btn-pulse-glow {
background: #8b5cf6;
color: white;
position: relative;
border: none;
}
.btn-pulse-glow::before,
.btn-pulse-glow::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
border-radius: inherit;
border: 2px solid #8b5cf6;
animation: pulse-glow 2s linear infinite;
z-index: 0;
}
.btn-pulse-glow::after {
animation-delay: 1s;
}
.btn-pulse-glow span {
position: relative;
z-index: 1;
}
@keyframes pulse-glow {
0% { transform: scale(1); opacity: 0.8; }
100% { transform: scale(1.3); opacity: 0; }
}3D Push
Satisfying 3D button press
Source Code
.btn-3d {
background: #f43f5e;
color: white;
transform: translateY(0);
box-shadow: 0 6px 0 #be123c, 0 10px 10px rgba(0,0,0,0.2);
transition: all 0.1s;
border: none;
}
.btn-3d:active, .btn-3d:hover {
transform: translateY(4px);
box-shadow: 0 2px 0 #be123c, 0 4px 4px rgba(0,0,0,0.2);
}Outline Slide
Background slide effect
Source Code
.btn-outline-slide {
position: relative;
background: transparent;
color: #f59e0b;
border: 2px solid #f59e0b;
overflow: hidden;
}
.btn-outline-slide span {
position: relative;
z-index: 1;
}
.btn-outline-slide::before {
content: '';
position: absolute;
top: 0; left: -100%; width: 100%; height: 100%;
background: #f59e0b;
transition: left 0.4s ease;
z-index: 0;
}
.btn-outline-slide:hover::before {
left: 0;
}
.btn-outline-slide:hover {
color: white;
}Performance First
Zero dependencies. pure logic. stunning design.
Lightweight
Built with standard CSS3 properties for maximum speed.
Compatible
Works everywhere. React, Vue, HTML, or WordPress.
Modern
Crafted with current UI/UX trends.