# hover CSS effects

Live preview Navigation

Floating Bottom Nav

Floating bottom navigation with pill design.

Live preview Buttons

3D Push Button

Skeuomorphic 3D button that physically depresses on click.

#hover #3d #shadow

Live preview Buttons

Birch Trunk

White birch trunk with peeling bark.

Orbit Spiral

Spiral inward orbit on hover.

Live preview Buttons

Aurora Borealis

Northern-lights button with shifting aurora hues.

Live preview Buttons

Blade Slash Button

Sleek button with a diagonal blade slash on hover.

Quiver Hard

Hard intense quiver on hover.

Live preview Navigation

3D Chevron Breadcrumbs

Breadcrumbs with 3D chevron separators.

Live preview Navigation

Horizontal Bottom Dot Nav

Horizontal dot navigation at bottom.

Property Trace Frame

Hover starts a registered angle animating, so the gradient outline runs the perimeter.

Live preview Navigation

Color Shift Navbar

Navbar with hue-shifting links on hover.

#hover #animation #shadow

Live preview Navigation

Neon Active Drawer Navbar

Drawer with a pulsing neon active indicator on the active link.

Live preview Tooltips

3D Fold Origami

Tooltip that unfolds in 3D like an origami paper fold.

#hover #transform #border

Aperture Iris Close

A dark circular iris contracts over the panel like a camera aperture closing on hover.

#gradient #hover #border

#animation #hover #border

Blink Swap

Content blinks rapidly and swaps text on each blink cycle on hover.

#hover #transform #filter

Duotone Magenta

Magenta-cyan duotone filter on hover.

Live preview Navigation

Arrow Curve Bend Navbar

Nav with curve-bent arrow separators between items.

Live preview Navigation

Float Rise Navbar

Hovered links gently rise and float with a soft glow underneath.

#hover #transform #border

Live preview Tooltips

3D Cube Spin

Tooltip that spins in 3D like a tumbling cube above the trigger.

Live preview Tooltips

Square Arrow Left

Tooltip with a sharp square-cut arrow pointing right.

Live preview Tooltips

Snow Winter

Winter-themed tooltip with falling snow pattern decoration.

Live preview Buttons

Antique Brass

Tarnished antique brass with verdigris spots.

Live preview Buttons

Barn Owl

Soft tawny owl-feather pattern.

Live preview Buttons

Binary Stream Button

Matrix-style button with falling binary digits in the background.

Live preview Buttons

Emery

Emery-abrasive button with a rough gritty texture.

#animation #hover #shadow

Live preview Buttons

Retro Terminal Button

Monospace terminal-style button with blinking cursor block.

Live preview Buttons

Spotlight Sweep Button

A warm yellow spotlight glow follows the cursor across the surface.

#gradient #hover #border

Bounce Elastic

Elastic overshoot bounce on hover.

Curtain Fall

Curtain falls down to cover content on hover.

Neon Shadow Text

Neon glow shadow on text on hover.

Wave Ripple Distort

Wave ripple distortion on hover.

Zoom Blur

Content zooms in with a radial blur, simulating a dolly zoom on hover.

#gradient #hover #shadow

Live preview Navigation

Arrow Hexagon Shape Navbar

Nav links shaped as hexagons with arrow flow.

Live preview Navigation

Underline Active Breadcrumbs

Breadcrumbs with underline on active item.

Live preview Navigation

Elevated Card Navbar

Navbar styled as an elevated card with deep shadow.

Live preview Navigation

Floating Dock Navbar

macOS-style floating dock navbar with bouncy hover.

Live preview Navigation

Glass Light Navbar

Light glass navbar with subtle backdrop tint.

Live preview Navigation

Vertical Tab Gradient Bg Flow

Vertical tabs with an animated gradient background flow on the active.

#hover #transform #border

Live preview Tooltips

Chevron Arrow

Tooltip with chevron-style arrow pointing to trigger.

Live preview Timelines

Cusp Roadmap Timeline

Quarters read as folded paper bands, each creased down the middle with a lifted corner.

#gradient #hover #origami

Live preview Avatars

Glide Scrollable Avatar Rail

A horizontally scrollable member rail with a slim custom scrollbar under it.

#scroll #group #rail

Live preview Buttons

Amber Glow Button

Warm amber button with a soft pulsing radial glow.

Live preview Buttons

Apricot Glow

Soft apricot orange with gentle glow.

Live preview Buttons

Bonsai Tree

Tiny bonsai with green crown on brown pot.

Live preview Buttons

Bracket Wrap Button

Code-style button wrapped by animated square brackets.

Live preview Buttons

Brass Buckle

Polished brass belt buckle shape.

Live preview Buttons

Ceramic Glaze

Glossy ceramic with speckled glaze.

Live preview Buttons

Frosted Ice Button

Translucent frosted ice button with a sweeping crystalline shine.

#gradient #hover #glass

Live preview Buttons

Nebula Cloud

Cosmic purple-pink nebula swirl.

Live preview Buttons

Pelagic

Open-ocean pelagic button with deep blue vastness.

Live preview Buttons

Rafter

Rafter-button with diagonal roof beams.

Live preview Buttons

Tundra Frost

Icy tundra grays with frost crystals.

Live preview Buttons

Vanilla Bean

Creamy vanilla with dark bean specks.

Live preview Buttons

Void Black

Pure void-black button with a subtle violet rim.

#hover #shadow #border

Live preview Buttons

Wave Crest

Wave-crest button with a curling white foam top.

Live preview Buttons

Whetstone

Whetstone-button with a smooth sharpening surface.

Live preview Buttons

Yarrow

Pale yarrow-cluster button with tiny white dots.

Live preview Cards

Credit Card

Realistic credit card with a gold chip, embossed number, brand mark and details.

#gradient #hover #3d

Border Gradient Flow

Animated gradient border flows on hover.

#hover #border #transform

Color Invert Pill

Pill swaps its background and text colors instantly on hover.

Contrast Punch

Contrast spikes for a punchy look on hover.

#hover #gradient #filter

Edge Light Up

All four edges light up on hover.

Needle Right Edge

Vertical needle bar slides in from right edge on hover.

#hover #animation #shadow

Flash Edges

Edges flash bright white on hover.

#hover #animation #border

Dashes Crawl Frame

Dashed border marches around the element on hover.

Inset Bevel Frame

Inset beveled frame creates depth on hover.

Glitter Shimmer

Glitter shimmers across surface on hover.

Glitter Sparkle

Glitter sparkles on hover.

Icon Jump Link

The arrow leaps forward and the label shifts slightly to follow it.

Pixelate In

Pixelate snap-in on hover.

#hover #filter

Rotate 3D Flip

Single 3D flip on hover.

#hover #transform #3d

Slide Random Reveal

Random-direction slide reveal on hover.

Squash Pancake

Squashes flat as pancake on hover.

Pop Letter

Letters pop up sequentially on hover.

Soft Shadow Text

Soft blurred shadow on text on hover.

Topspin

Element topspins forward on hover.

#hover #transform #3d

Tritone Forest

Earthy forest tritone gradient on hover.

Typewriter Reveal

Text types out character by character on hover.

#hover #animation

Warm Overlay

Warm orange overlay washes in on hover.

#hover #gradient

Wipe Down

New color wipes down from top on hover.

3D Zoom Tilt

3D zoom tilt transform on hover.

Live preview Navigation

Blurred Glass Navbar

Navbar with heavy backdrop blur and gradient border.

Live preview Navigation

3D Arrow Breadcrumbs

Breadcrumbs with 3D arrow separators.

Live preview Navigation

Curve Arrow Breadcrumbs

Breadcrumbs with curved arrow separators.

Live preview Navigation

Icon Text Breadcrumbs

Breadcrumbs with icons and text.

Live preview Navigation

Line Separator Breadcrumbs

Breadcrumbs with vertical line separators.

Live preview Navigation

Pipe Separator Breadcrumbs

Breadcrumbs with pipe separators.

Live preview Navigation

Multi Level Drawer Navbar

Multi-level drawer with progressively indented sub-sections.

#hover #border

Live preview Navigation

Stack Cards Drawer Navbar

Drawer with stacked card-style links that fan out on hover.

Live preview Navigation

Magnetic Pull Navbar

Links magnetically grow toward the hovered item while neighbors shrink back.