Pure CSS Hover Effects
CSS hover effects react when a pointer moves over an element: image zooms, underline reveals, color shifts, lifted cards and animated links, all done in CSS.
23 free examples, most liked first. Click one to preview it and copy the code.
Gradient Hover Effect
by @admin · Css Animation
Cool 3D Hover Effect
by @admin · Css Animation
3D Cutout Card Hover effect
by @admin · Cards
Direction-Aware Hover Effect
by @admin · Hover
On Click Ripple Effect
by @admin · Hover
Hover Icons
by @admin · Hover
text-decoration: underline animated
by @admin · Hover
Pure CSS Circle Hover Affect
by @admin · Hover
Honeycomb with hover effect Pure CSS
by @admin · Hexagons
Six Pure CSS Button Hover Animations
by @admin · Hover
Hover Fill my Heart Up
by @admin · Hover
Cool Css Button Border Animation On Hover – CSS3 Hover Effects – Pure CSS
by @admin · Hover
CSS Buttons Hover Effects
by @admin · Hover
Pure Css Button Hover effect
by @admin · Hover
Button Hover Effect
by @admin · Hover
Button hover inner shadow
by @admin · Hover
Header navigation menu with dropdown on hover (pure CSS)
by @admin · Hover
Pure CSS – File icons with hover animation
by @admin · Hover
Smoke Animation Pure CSS Hover Text
by @admin · Css Animation
Pure CSS iOS 7 Icons hover w/ Jiggle Effect
by @admin · Hover
Pure CSS Animated Weather Icon Hover
by @admin · Hover
Button Hover v2 Effect Using Pure CSS
by @admin · Buttons
Mouse in and out Hover Effect
by @admin · Hover
Hover Effects FAQ
How do I add a hover effect with CSS?
Write the normal style, then a :hover version of the same selector with the changes, and add a transition so the change animates. Copy any example here to start.
How do I use these pure CSS hover effects?
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.