#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

Slant Clip Path Navbar

Nav bar with a custom angled clip-path creating a parallelogram.

#hover

Live preview Navigation

Slant Cut Corner Navbar

Nav with a folded corner cut on the top-right.

#hover

Live preview Navigation

Slant Glow Edge Navbar

Slanted nav with glowing edge accents along the cuts.

#hover #shadow #border

Live preview Navigation

Slant Gradient Flow Navbar

Slanted nav with an animated gradient background flow.

#hover #animation #gradient

Live preview Navigation

Slant Left Cut Navbar

Nav bar with a slanted diagonal cut on the left edge.

#hover

Live preview Navigation

Slant Neon Edge Navbar

Slanted nav with pulsing neon pink edge accents.

#hover #animation #shadow

Live preview Navigation

Slant Right Cut Navbar

Nav bar with a slanted diagonal cut on the right edge.

#hover

Live preview Navigation

Slant Rotate Tilt Navbar

Nav with the entire bar slightly rotated for a tilted slant.

#hover #gradient #transform

Live preview Navigation

Slant Skew Tilt Navbar

Nav with skew-tilted active item creating a slanted look.

#hover #transform

Live preview Navigation

Slant Top Cut Navbar

Nav bar with a slanted diagonal cut at the top edge.

#hover

Live preview Navigation

Soft Pink Navbar

Soft pink themed navbar with rose accents.

#hover #gradient #shadow

Live preview Navigation

Split Arrow Flow Navbar

Nav links separated by arrow flow indicators pointing right.

#hover #animation #transform

Live preview Navigation

Split Chevron Flow Navbar

Nav links separated by double-chevron flow indicators.

#hover

Live preview Navigation

Split Curve Wave Navbar

Nav links with a wavy curve separator between them.

#hover #transform

Live preview Navigation

Split Diagonal Cut Navbar

Nav links with diagonal cut separators between them.

#hover

Live preview Navigation

Split Dot Flow Navbar

Nav links separated by pulsing dot flow indicators.

#hover #animation #transform

Live preview Navigation

Split Greater Flow Navbar

Nav links separated by greater-than flow indicators.

#hover

Live preview Navigation

Split Half Divider Navbar

Nav split into two halves with a central vertical divider.

#hover #gradient #shadow

Live preview Navigation

Split Horizontal Divider Navbar

Nav links separated by horizontal lines stacked vertically.

#hover #shadow #border

Live preview Navigation

Split Layout Navbar

Navbar with brand on left, links center, actions on right.

#hover #border

Live preview Navigation

Split Line Dashed Navbar

Nav links separated by dashed line dividers.

#hover #gradient #shadow

Live preview Navigation

Split Line Dotted Navbar

Nav links separated by dotted line dividers.

#hover #gradient

Live preview Navigation

Split Line Glow Navbar

Nav links separated by glowing line separators.

#hover #shadow

Live preview Navigation

Split Pipe Flow Navbar

Nav links separated by vertical pipe flow indicators.

#hover

Live preview Navigation

Split Quad Grid Navbar

Nav split into four equal quadrants with cross divider.

#hover

Live preview Navigation

Split Slash Flow Navbar

Nav links separated by slash flow indicators.

#hover #shadow

Live preview Navigation

Split Thirds Grid Navbar

Nav split into three equal columns separated by dividers.

#hover #border

Live preview Navigation

Split Vertical Divider Navbar

Nav with prominent vertical divider bars between links.

#hover #border

Live preview Navigation

Split Wave Edge Navbar

Nav with a wave-edge border between active and inactive items.

#hover #gradient

Live preview Navigation

Split Zigzag Edge Navbar

Nav links with zigzag-edged separators between items.

#hover #transform

Live preview Navigation

Spring Pop Navbar

Active link springs outward with a playful pop animation.

#hover #gradient #transform

Live preview Navigation

Square Sharp Navbar

Sharp-edged navbar with no rounding.

#hover #transform #border

Live preview Navigation

Stamp Ink Rotate Nav

Active link shows a rotated ink stamp badge with skewed impression.

#hover #gradient #transform

Live preview Navigation

Stamp Paper Fold Nav

Paper sheet nav with folded corner revealing the active item underneath.

#hover #gradient #transform

Live preview Navigation

3D Step Indicator

3D extruded step indicator.

#hover #transform #shadow

Live preview Navigation

Checkmarks Step Indicator

Step indicator with checkmarks for done steps.

#hover

Live preview Navigation

Circular Step Indicator

Step indicator with circular progress ring.

#hover #transform #shadow

Live preview Navigation

Dots Step Indicator

Step indicator with dots between numbers.

#hover #transform #shadow

Live preview Navigation

Floating Step Indicator

Floating step indicator with hover lift.

#hover #transform #shadow

Live preview Navigation

Glow Step Indicator

Dark step indicator with glowing active step.

#hover #shadow

Live preview Navigation

Gradient Step Indicator

Step indicator with animated gradient on active.

#hover #animation #gradient

Live preview Navigation

Horizontal Step Indicator

Horizontal step indicator with connecting lines.

#hover #shadow

Live preview Navigation

Neon Step Indicator

Neon themed step indicator.

#hover #transform #shadow

Live preview Navigation

Numbered Step Indicator

Horizontal numbered step indicator.

#hover

Live preview Navigation

Pill Step Indicator

Step indicator with pill-shaped markers.

#hover

Live preview Navigation

Progress Bar Step Indicator

Step indicator with connecting progress bar.

#hover #gradient #transform

Live preview Navigation

Rounded Step Indicator

Step indicator with rounded square markers.

#hover #gradient #transform

Live preview Navigation

Vertical Step Indicator

Vertical step indicator with connecting line.

#hover #shadow

Live preview Navigation

Sticky Shadow Navbar

Navbar that grows a deep shadow when stuck to top.

#hover #shadow

Live preview Navigation

Sticky Shrink Navbar

Navbar that shrinks padding on hover simulating sticky state.

#hover #shadow #border

Live preview Navigation

Sunset Orange Navbar

Sunset orange navbar with warm gradient.

#hover #gradient #shadow

Live preview Navigation

Swing Pendulum Navbar

Links swing like a pendulum anchored at the top on hover.

#hover #animation #transform

Live preview Navigation

3D Flip Tabs

Tabs with 3D flip animation on active state.

#hover #transform #shadow

Live preview Navigation

3D Shadow Tabs

Tabs with deep 3D shadow on active.

#hover #gradient #transform

Live preview Navigation

Animated Underline Tabs

Tabs with continuously animated underline.

#hover #animation #gradient

Live preview Navigation

Arrow Indicator Tabs

Tabs with an arrow indicator under active tab.

#hover #transform #border

Live preview Navigation

Bar Grow Tabs

Tabs with a top bar that grows from center on active.

#hover #transform

Live preview Navigation

Icon Tab Bar

A mobile style tab bar where the selected item lifts and reveals its caption.

#hover #transform #shadow

Live preview Navigation

Circle Background Tabs

Tabs with circle background morph on hover.

#hover #transform

Live preview Navigation

Square Background Tabs

Tabs with square background morph on hover.

#hover #gradient #transform

Live preview Navigation

Border Bottom Tabs

Classic tabs with active border bottom.

#hover #border

Live preview Navigation

Border Box Tabs

Tabs with animated border box on active.

#hover #transform #border

Live preview Navigation

Color Shift Tabs

Tabs that shift hue on hover.

#hover #gradient #shadow

Live preview Navigation

Corner Marker Tabs

Tabs with corner marker indicator.

#hover #transform

Live preview Navigation

Cube Rotate Tabs

Tabs that rotate like a 3D cube on hover.

#hover #gradient #transform

Live preview Navigation

Dashed Underline Tabs

Tabs with dashed underline indicator.

#hover #transform #border

Live preview Navigation

Dot Indicator Tabs

Tabs with a glowing dot above active tab.

#hover #transform #shadow

Live preview Navigation

Dotted Underline Tabs

Tabs with dotted underline indicator.

#hover #transform #border

Live preview Navigation

Double Line Tabs

Tabs with double line top and bottom indicator.

#hover #transform

Live preview Navigation

Double Underline Tabs

Tabs with double underline indicator.

#hover #transform #border

Live preview Navigation

Fill Background Tabs

Tabs with a filling background animation on hover.

#hover #transform

Live preview Navigation

Flip 3D Tabs

Tabs with full 3D flip transform on hover.

#hover #gradient #transform

Live preview Navigation

Flip X Tabs

Tabs that flip on X axis on hover.

#hover #transform #shadow

Live preview Navigation

Flip Y Tabs

Tabs that flip on Y axis on hover.

#hover #transform #shadow

Live preview Navigation

Fold Corner Tabs

Tabs with folded corner effect on active.

#hover #gradient

Live preview Navigation

Glow Active Tabs

Active tab with a soft glowing aura.

#hover #shadow

Live preview Navigation

Gradient Background Tabs

Tabs with animated gradient background on active.

#hover #animation #gradient

Live preview Navigation

Gradient Underline Tabs

Tabs with animated gradient underline.

#hover #gradient #transform

Live preview Navigation

Icon Shift Tabs

Tabs with icon and label that shift on hover.

#hover #transform

Live preview Navigation

Bottom Line Tabs

Tabs with thin bottom line indicator.

#hover #transform #border

Live preview Navigation

Left Line Tabs

Vertical tabs with left line indicator.

#hover #transform

Live preview Navigation

Right Line Tabs

Vertical tabs with right line indicator.

#hover #transform

Live preview Navigation

Top Line Tabs

Tabs with thin top line indicator.

#hover #transform

Live preview Navigation

Morph Circle Tabs

Active tab morphs into a circle shape.

#hover #shadow

Live preview Navigation

Morph Pill Tabs

Active tab morphs into a pill shape.

#hover #shadow

Live preview Navigation

Pressed In Tabs

Tabs that press inward when active.

#hover #shadow

Live preview Navigation

Raised Active Tabs

Active tab appears raised above others.

#hover #gradient #transform

Live preview Navigation

Rounded Active Tabs

Fully rounded active tab indicator.

#hover #gradient #shadow

Live preview Navigation

Slide Content Tabs

Tabs with sliding content background indicator.

#hover #gradient #transform

Live preview Navigation

Thin Underline Tabs

Tabs with ultra thin underline indicator.

#hover #transform

Live preview Navigation

Underline Slide Tabs

Tabs with sliding underline indicator on active state.

#hover #transform #border

Live preview Navigation

Text 3D Shadow Stack Navbar

Active link text projects a stacked 3D shadow forming extruded depth.

#hover #shadow

Live preview Navigation

Text Fill Mask Navbar

Link text fills with color from the bottom up on hover.

#hover #gradient

Live preview Navigation

Text Gradient Shift Link Navbar

Hovered links shift a gradient text fill smoothly across the letters.

#hover #gradient

Live preview Navigation

Letter Spacing Grow Navbar

Hovered link expands its letter spacing for a refined editorial feel.

#hover #transform #border

Live preview Navigation

Letter Spacing Shrink Navbar

Links have wide letter spacing that compresses on hover.

#hover #transform

Popular tags