# hover CSS effects

Live preview Navigation

Floating Bottom Nav

Floating bottom navigation with pill design.

Orbit Spiral

Spiral inward orbit on hover.

Live preview Buttons

Aurora Borealis

Northern-lights button with shifting aurora hues.

Live preview Navigation

Horizontal Bottom Dot Nav

Horizontal dot navigation at bottom.

Live preview Buttons

Birch Trunk

White birch trunk with peeling bark.

Live preview Tooltips

3D Fold Origami

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

Quiver Hard

Hard intense quiver 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 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 Buttons

Blade Slash Button

Sleek button with a diagonal blade slash on hover.

Live preview Buttons

Emery

Emery-abrasive button with a rough gritty texture.

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.

Live preview Navigation

Arrow Curve Bend Navbar

Nav with curve-bent arrow separators between items.

#hover

Live preview Buttons

3D Push Button

Skeuomorphic 3D button that physically depresses on click.

#hover #3d #shadow

Live preview Buttons

Frosted Ice Button

Translucent frosted ice button with a sweeping crystalline shine.

#gradient #hover #glass

Live preview Buttons

Yarrow

Pale yarrow-cluster button with tiny white dots.

Bounce Elastic

Elastic overshoot bounce on hover.

Live preview Navigation

Arrow Hexagon Shape Navbar

Nav links shaped as hexagons with arrow flow.

#hover

Live preview Navigation

Float Rise Navbar

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

Live preview Tooltips

Curve Arrow Top

Tooltip with a curved swooping connector above the trigger.

Live preview Tooltips

Charcoal Noir

Near-black charcoal tooltip with a film-noir mood.

Live preview Tooltips

Message Tail Clip

Chat-bubble tooltip with a clip-path message tail.

Live preview Buttons

Acorn Cap

Brown acorn with cap-textured top.

Live preview Buttons

Acorn Shell

Acorn-brown button with a glossy cap shell.

Live preview Buttons

Aerospace Panel

Industrial aerospace metal panel with rivets.

Live preview Buttons

Almond Cream

Soft almond-cream with brown speckle.

Live preview Buttons

Amber Haze

Golden amber button with a hazy outer glow.

Live preview Buttons

Andromeda

Andromeda-galaxy button with spiral star arms.

#gradient #animation #hover

Live preview Buttons

Animated Stripe Button

Diagonal candy stripes that scroll continuously across the button.

Live preview Buttons

Anodized Aluminum

Colorful anodized aluminum with smooth surface.

Live preview Buttons

Antique Brass

Tarnished antique brass with verdigris spots.

Live preview Buttons

Aquamarine Sea

Pale aquamarine sea-gem with clear facets.

Live preview Buttons

Arc Welder Button

Industrial button with an electric arc tracing its top edge.

Live preview Buttons

Dahlia Bloom

Layered dahlia petals in deep magenta.

Live preview Buttons

Frame Border Button

Photo-frame button with a double-line inset border on hover.

#hover #shadow #border

Live preview Buttons

Graphite Pencil

Dark graphite pencil-tip sheen.

Live preview Buttons

Honeydew Fresh

Pale honeydew melon green button.

Live preview Buttons

Jetty

Jetty-button with stone breakwater pattern.

Live preview Buttons

Magenta Hot Pulse

Vivid magenta button with a throbbing pulse.

Live preview Buttons

Moonlight Glow

Pale blue moon-kissed button with halo.

Live preview Buttons

Obelisk

Tall obelisk button with a tapered pyramid top.

Live preview Buttons

Platinum Edge

Polished platinum button with sharp edge.

#animation #hover #shadow

Live preview Buttons

Retro Terminal Button

Monospace terminal-style button with blinking cursor block.

Live preview Forms

Segmented Switch

Segmented toggle group with sliding indicator between options.

#hover #shadow #border

#hover #animation #border

Border Dash March

Dashed border marches around on hover.

Color Shift BG

Background hue rotates continuously on hover.

Color Swap Fast

Foreground and background colors swap on hover.

#hover #transform #filter

Cyan Shift

Hue rotates to cyan on hover.

#hover #transform #filter

Duotone Magenta

Magenta-cyan duotone filter on hover.

Embers Float

Floating embers drift up on hover.

Explode Out

Colored shards burst outward in all directions with scaling and fading on hover.

#gradient #hover #border

Fade In Zoom

Zoom fade-in on hover.

Fire Spark

Fire sparks flicker on hover.

Flip 3D Coin

Coin-toss flip on hover.

Flip Card

Card flips in 3D to reveal its back face on hover.

#gradient #hover #3d

Metallic Sheen Frame

Metallic gradient sheen sweeps the frame on hover.

Glow Beam Vertical

Vertical light beam sweeps on hover.

Glow Laser Grid

Laser grid lines light up on hover.

Jelly Wobble

Element wobbles like jelly on hover.

Stripes Diagonal Mask

Diagonal stripes sweep across on hover.

Stripes Vertical Mask

Vertical stripes cascade down on hover.

Rainbow Arcs

Rainbow arcs shimmer on hover.

Rain Drops

Rain streaks fall on hover.

Mega Shake

Violent mega shake on hover.

Spotlight Dim Warm

Dim warm spotlight on hover.

#hover #gradient

Squash Pancake

Squashes flat as pancake on hover.

Text Blur Focus

Text blurs then focuses on hover.

#hover #filter

Fast Typewriter

Fast typewriter effect on hover.

#hover

Center-Out Underline

An underline grows outward from the link's center on hover.

#hover #css

Horizontal Wobble

Horizontal wobble motion on hover.

Live preview Navigation

Circle Hamburger

Hamburger inside a circle that morphs on hover.

Live preview Navigation

Flip Hamburger

Hamburger that flips on Y axis.

Live preview Navigation

Hover Glow Breadcrumbs

Breadcrumbs with glow on hover.

#hover #shadow

Live preview Navigation

Zigzag Trail Breadcrumbs

Breadcrumbs with zigzag pattern separators.

#hover #animation #border

Live preview Navigation

Push Content Left Drawer Navbar

Left drawer pushes the main content rightward when opening.

Live preview Navigation

Gradient Flow Navbar

Navbar with an animated gradient background flowing across links.

Live preview Navigation

3D Icon Nav

3D extruded icon navigation.

Live preview Navigation

Step Bar Fill Nav

Horizontal stepper where each segment fills a progress bar on hover.

Live preview Navigation

Underline Segmented Control

Segmented control with an underline indicator that slides between items.

Live preview Navigation

Split Divider Line Navbar

Nav links separated by thin vertical divider lines.

#hover #shadow

Live preview Navigation

Split Line Gradient Flow Navbar

Nav links separated by animated gradient line dividers.

Live preview Navigation

Stamp Ink Press Nav

Active link stamps down with an inked impression effect.

Live preview Navigation

Flip Card Tabs

Tabs that flip like cards revealing back face.

Live preview Navigation

Morph Triangle Tabs

Active tab morphs with triangle clip-path.

#hover #gradient

Live preview Navigation

Pill Bounce Tabs

Pill tabs that bounce into place on active.

Live preview Tooltips

Confetti Pop

Tooltip with confetti pop animation above the trigger.

Live preview Tooltips

Glass Iridescent

Iridescent glass tooltip with a rainbow shimmer overlay.

Live preview Tooltips

Green Success

Green success tooltip with checkmark styling above the trigger.

Live preview Tooltips

Groove Border Top

Tooltip with a 3D grooved border above the trigger.

Live preview Tooltips

Icon Help

Tooltip with question mark icon above the trigger.

Live preview Tooltips

Light Top

Clean light tooltip with subtle shadow above the trigger.