Classic Wave
Liquid
v2.4 — 8 new wave presets just shipped
HoverWave
Buttons that ripple, undulate, and mesmerize.
Interactive · Section 02
Tune your wave in real-time
Adjust sliders, watch the CSS regenerate live, and copy the exact snippet you need. No build step, no boilerplate.
Hover or press-and-hold to trigger
wave.css
.btn {
position: relative;
overflow: hidden;
background: #150a35;
color: #f5f3ff;
padding: 1rem 2.5rem;
border: none;
border-radius: 999px;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: color 600ms ease-in-out;
isolation: isolate;
}
.btn::before {
content: '';
position: absolute;
inset: auto 0 calc(-100% + 30%) 0;
background: #ff2e93;
transition: inset 600ms ease-in-out;
z-index: -1;
}
.btn:hover::before,
.btn:focus-visible::before {
inset: auto 0 0 0;
}
@media (prefers-reduced-motion: reduce) {
.btn,
.btn::before { transition: none; }
} Hit Randomize for instant inspiration.
Library · Section 03
40+ animations, one library
Twelve featured wave presets below — hover any card to see the animation, then grab the snippet in two clicks.
Liquid Lava
Liquid
Magnetic Pull
Magnetic
Slosh & Splash
Liquid
Tidal Flip
Pulse
Vortex Swirl
Pulse
Bubble Pop
Liquid
Gradient Surf
Color
Neon Pulse
Pulse
Dual Wave
Liquid
Elastic Bounce
Pulse
Color Cascade
Color
Why HoverWave · Section 04
Why developers ship with HoverWave
Three pillars that make this the most-depended-upon button library on GitHub.
Zero JavaScript
Every animation is pure CSS using @keyframes, transforms, and pseudo-elements. The browser's compositor does the work — no runtime, no bundle, no maintenance.
.btn::before { content: ''; transform: translateY(100%); }
Drop-in Ready
Each snippet is self-contained — just paste and style. No wrapper components, no peer dependencies, no version lock-in. Works the day you add it and the day you don't.
$ npm i # not required $ copy wave.css → your project ✓ ship in 30 seconds
Performance First
All animations use GPU-accelerated transforms and will-change hints, hitting a consistent 60fps even on mid-range mobile devices. Measured, not promised.
FPS 60
0+
Animations
0
Lines of JavaScript
0 LOC
Avg. snippet size
0.0k
GitHub stars
0+
Active devs using it
0%
60fps maintained on
Powering buttons at
Vercel Linear Stripe Notion Figma GitHub
Read the Source · Section 06
Read the source, ship in seconds
Full snippet on the left, live previews on the right. Every line maps to a visible change — no magic, no minified surprises.
liquid-lava.css _variables.css
12345678910111213141516171819202122
/* HoverWave — Liquid Lava v1.0 */
.btn {
position: relative;
overflow: hidden;
background: #1a0a3a;
color: #f5f3ff;
padding: 1rem 2.5rem;
border: none;
border-radius: 12px;
font-weight: 700;
cursor: pointer;
isolation: isolate;
}
.btn::before, .btn::after {
content: '';
position: absolute;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
45deg,
#ff2e93 0%, #ff6b35 25%,
#ffd93d 50%, #00f0ff 75%,
#ff2e93 100%
);
background-size: 200% 200%;
transform: translateY(100%);
transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
z-index: -1;
animation: lava-flow 3s linear infinite;
}
.btn::after {
animation-delay: -1.5s;
opacity: 0.5;
}
.btn:hover::before,
.btn:hover::after { transform: translateY(0); }
@keyframes lava-flow {
to { background-position: 200% 0; }
}Small
Medium
Large
Small
Medium
Large
Common Questions · Section 07
Common questions
Everything you need to know before you ship. Still curious? Open an issue on GitHub.
Yes — Chrome, Safari, Firefox, and Edge all support the modern CSS used in every HoverWave animation. Each snippet ships with a graceful fallback that keeps your buttons fully clickable and accessible on older browsers, with progressive enhancement for those that support the latest features.