Live preview Navigation
#hover CSS effects
3,025 free, pure-CSS effects match the "hover" tag. Each is copy-ready and needs no library or build step.
Live preview Navigation
Text Rainbow Flow Navbar
Active link text flows through a rainbow gradient animation.
Live preview Navigation
Text Scramble Hover Navbar
Hovered links scramble their letters via a positional jitter animation.
Live preview Navigation
Live preview Navigation
Text Stroke Draw Navbar
Active link text has its stroke drawn animatedly via dash-offset.
Live preview Navigation
Live preview Navigation
Live preview Navigation
Ticket Stub Perforate Nav
Nav styled as ticket stubs with perforated edges between items.
Live preview Navigation
Ticket Stub Tear Nav
Active ticket stub torn along its perforation edge on hover.
Live preview Navigation
Live preview Navigation
Live preview Navigation
Sliding Underline Nav
Each link grows its own underline from the left as the pointer passes over it.
Live preview Navigation
Live preview Navigation
Live preview Navigation
Vertical Tab Left Arrow Pointer
Vertical tabs with a left-pointing arrow on the active item.
Live preview Navigation
Vertical Tab Right Border Active
Vertical tabs with a right accent border on the active item.
Live preview Navigation
Live preview Navigation
Live preview Navigation
Vertical Tab Dot Indicator
Vertical tabs with a glowing dot indicator on the active item.
Live preview Navigation
Vertical Tab Fill Bg
Vertical tabs with a sliding colored fill background on hover.
Live preview Navigation
Vertical Tab Icon Trailing
Vertical tabs with trailing right-side icons that pop on active.
Live preview Navigation
Live preview Navigation
Live preview Navigation
Vertical Tab Pill Morph
Vertical tabs where the active pill morphs smoothly between items.
Live preview Navigation
Vertical Tab Progress Bar
Vertical tabs with an active progress bar fill on the active item.
Live preview Navigation
Live preview Navigation
Vertical Tab Slide Content
Vertical tabs that slide horizontally revealing content offset.
Live preview Navigation
Vertical Tab Step Marker
Vertical tabs with numbered step markers like a wizard.
Live preview Navigation
Circle Mask Wipe Nav
Active indicator revealed by a circle that expands outward from the link.
Live preview Navigation
Wipe Right Reveal Nav
Active tab revealed by a rightward wipe sweeping across the nav bar.
Live preview Sliders
Flint Triangle Slider
A clipped flint arrowhead points down at the rail like a ruler marker.
Live preview Sliders
Frost Track Slider
A hairline icy rail carries a glowing round knob that swells under the pointer.
Live preview Sliders
Rivet Corner Radius
A riveted steel plate rounds all the way from a hard square into a full circle on hover.
Live preview Tabs
Obsidian Hover Tabs
Hovering previews a tab in indigo before the click; the panel rises from below.
Live preview Tables
Arc Fixture Reveal
Hovering a fixture arcs open a second line under the tie that lists the goal scorers.
Live preview Tables
Basalt Airy Rows
Generous vertical rhythm gives three roomy rows plenty of breathing space.
Live preview Tables
Bloom Palette Swatches
Colour chips sit on a woven checker so alpha reads true, and each chip blooms wider under the pointer.
Live preview Tables
Brass Row Lift
Hovering a row slides it sideways and drops a warm brass rail on its left edge.
Live preview Tables
Conduit DNS Records
Long record values are clipped in place and reel sideways on hover instead of widening the table.
Live preview Tables
Coral Selected Rail
The selected row keeps a coral rail on its left edge and hovering previews it.
Live preview Tables
Cove Zebra And Hover
Static zebra banding stays readable while the hovered row overrides it with a lit rail.
Live preview Tables
Dash Keyboard Shortcuts
Shortcut rows render real key caps that sink into the board when the row is pointed at.
Live preview Tables
Ember Tag Cloud Cell
One column holds a cluster of small tag chips that lift slightly under the pointer.
Live preview Tables
Flint Underline Reveal
A stripped down table where hovering a row draws an underline beneath its label.
Live preview Tables
Halo Room Compare
Amenity levels are drawn as radial gradient rings and hovering a row lays a halo around them.
Live preview Tables
Lever Config Diff
A before and after column pair marked with minus and plus gutters like a review diff view.
Live preview Tables
Oasis Pill Rows
Every row is a fully rounded pill and hovering slides a warm fill across it left to right.
Live preview Tables
Onyx Grid Frame
A fully ruled grid where the hovered cell brightens its own square only.
Live preview Tables
Pearl Initial Avatars
The name column pairs each entry with a round initial chip in its own tint.
Live preview Tables
Prairie Hover Arrow
Hovering a row slides a chevron in from the right edge to hint that it can be opened.
Live preview Tables
Shaft File Manifest
A file listing where the extension sits in a coloured tile that tips forward under the pointer.
Live preview Tables
Slate Column Scan
Pointing at any cell lights the whole column through a pure CSS has() selector.
Live preview Tables
Tundra Dashed Divider
Rows are parted by a hand tuned dash rhythm that turns solid when the row is hovered.
Live preview Text
Outline Fill Text
Hollow stroked letters flood with colour from left to right when hovered.
Live preview Text
Layered Shadow Text
Stacked hard shadows push the heading into a solid extruded block on hover.
Live preview Text
Split Color Hover
Text splits horizontally — top half dark, bottom half colored — and swaps on hover.
Live preview Text
Live preview Tooltips
3D Flip Card Tooltip
3D card-flip tooltip that rotates open like a flip card.
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
3D Rotate X
Tooltip that rotates fully on the X axis to appear above the trigger.
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Dashed Arrow Bottom
Tooltip below the trigger connected by a dashed line with arrow.
Live preview Tooltips
Dashed Arrow Right
Tooltip to the right of the trigger with a dashed connector.
Live preview Tooltips
Dashed Arrow Top
Tooltip connected to the trigger by a dashed line with arrow.
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Fading Arrow Tooltip
A classic bubble with a pointed arrow that fades upward into place on hover.
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Line Horizontal Arrow
Tooltip connected by a solid horizontal line indicator on the right.
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips