21 CSS Button Hover Effects
Advertisement
A CSS button hover effect is the motion or transformation that fires when a pointer enters a button. These 21 hand-coded effects are ready-to-ship microinteractions for primary CTAs, navigation buttons, and form submits — copy the CSS, attach to your existing button markup, and ship.
01 / 21
Liquid Fill
Pure CSS 
Background floods upward like liquid filling a container via pseudo-element height transition.
02 / 21
Magnetic Border
Pure CSS 
A conic-gradient border spins into view on hover and the button lifts with a coloured glow.
03 / 21
Glitch Slice
Pure CSS 
Two color-shifted clones slice through in staggered horizontal bands, simulating a signal glitch.
04 / 21
Neon Pulse
Pure CSS 
Multi-layered box-shadows create a breathing neon glow that pulses rhythmically on hover.
05 / 21
Split Reveal
Pure CSS 
The button splits at the centre — top half slides up, bottom half slides down — both halves show the same text.
06 / 21
Diagonal Shutter
Pure CSS 
A skewed gradient panel wipes diagonally across the button like a camera shutter opening.
07 / 21
Elastic Lift
Pure CSS 
A hard bottom shadow creates a physical 3D effect — elastic cubic-bezier makes it bounce on hover.
08 / 21
Center Underline Draw
Pure CSS 
A gradient underline expands symmetrically outward from the center of the button text.
09 / 21
3D Flip
Pure CSS 
The button flips on its X axis to reveal a second face — pure CSS 3D transform perspective.
10 / 21
Particle Burst
Pure CSS 
Six colored dots shoot out in all directions from the center of the button on hover.
11 / 21
Slide Doors
Pure CSS 
Two panels slide in from opposite sides and meet in the middle to fill the entire button.
12 / 21
Typewriter Retype
CSS + JS 
Text erases and retypes itself character by character on hover — like a live terminal cursor.
13 / 21
Hard Shadow Shift
Pure CSS 
Brutalist hard offset shadow shifts both position and color on hover, snaps back on click.
14 / 21
Ripple Wave
CSS + JS 
A ripple circle radiates outward from the exact point of your click, like Material Design.
15 / 21
Rainbow Border Spin
Pure CSS 
A conic-gradient border spins continuously using the CSS mask-composite technique.
16 / 21
Morph Shape
Pure CSS 
The button border-radius morphs from rectangle to pill and color transitions simultaneously.
17 / 21
Icon Slide In
Pure CSS 
An arrow slides in from outside as the button padding expands to make room for it.
18 / 21
Cursor Spotlight
CSS + JS 
A soft radial light follows your cursor around inside the button, illuminating where you hover.
19 / 21
Stagger Fill
Pure CSS 
Five vertical segments fill upward one by one in a cascading waterfall sequence.
20 / 21
Sunburst Expand
Pure CSS 
Spinning conic-gradient rays fan out behind the button on hover, glowing like a sunburst.
Advertisement
Build your own
Tweak the exact look in our visual generators — no signup, instant copy-paste.
FAQ
Frequently asked questions
How do I add a hover effect to a button in CSS?
Target the button's :hover state and change a property — background, color, transform, box-shadow — with a transition on the base button so the change animates smoothly. For richer effects, animate a pseudo-element: an ::before or ::after that wipes, fills or slides in on hover. Every effect in this gallery is built this way; open any demo's code panel to copy it.
How does the liquid fill button hover effect work?
A pseudo-element starts collapsed (scaled down or clipped) behind the button text. On :hover it expands to cover the button — scaling up, or animating a clip-path or height — so a colour appears to flood in. Keeping the text in a higher layer keeps it readable as the fill rises. The Liquid Fill demo here is a copy-paste example.
Do these CSS button hover effects need JavaScript?
Almost all are pure CSS — :hover plus transitions, transforms, pseudo-elements and @keyframes handle the effect. A few magnetic or pointer-tracking effects use a small vanilla JS snippet to follow the cursor; where that's the case, the snippet is included, self-contained, in the JS tab.
How do I make button hover effects smooth and performant?
Animate transform and opacity rather than width, height or margins — they're GPU-accelerated and don't cause layout reflow. Put the transition on the button's resting state (not only on :hover) so the effect eases both in and out, and keep durations short (150–300ms) so the button feels responsive.
Are these button hover effects accessible and free?
Yes. Every demo uses a real button element with a visible :focus-visible state so keyboard users see the same affordance as mouse users, and continuous motion honours prefers-reduced-motion. All 21 effects are MIT licensed and free for personal and commercial use.
Related collections
27 CSS Card Hover Effects
27
27 original CSS card hover effects — elastic lift, 3D tilt, holographic shimmer, spotlight, aurora and more. Pure CSS with 4 vanilla JS enhancements. Copy-paste ready.
cards hover animation
Responsive
20 CSS Link Hover Effect Designs
20
20 free CSS link hover effects — animated underlines, glitches, neon flickers, marker highlights, 3D flips and more, with copy-paste code.
css link hover link effects underline animation
Responsive
15 Pure CSS Loading Animations
15
15 hand-coded CSS loading animations — DNA helix, liquid blob, orbit system, neon ring, hourglass flip, listing skeleton, building loader and more. Pure CSS, drop-in ready.
loading spinner animation
Responsive