# hover CSS effects

Live preview Navigation

Dark Fade Overlay Navbar

Side panel nav with a fading dark overlay backdrop.

Live preview Navigation

Aurora Gradient Overlay Navbar

Modal nav over an aurora gradient animated background.

Live preview Navigation

Light Fade Overlay Navbar

Side panel nav with a fading light translucent backdrop.

Live preview Navigation

Active Flip Pagination

Active page flips on Y axis.

Live preview Navigation

Pulse Throb Navbar

Active link throbs with a pulsing scale animation.

#slider #typography #preview

Live preview Navigation

Square Active Tabs

Square-shaped active tab indicator.

#hover

Live preview Navigation

Thick Underline Tabs

Tabs with a thick underline indicator.

#hover #border

Live preview Navigation

Text Blur Focus Navbar

All links blur except the hovered one which comes into sharp focus.

#hover #filter

Live preview Navigation

Text Reveal Mask Navbar

Hovered link text reveals through a vertical wipe mask.

#hover

Live preview Navigation

Text Slide Down Mask Navbar

Link text slides down, replaced by a duplicate from above.

#hover

Live preview Navigation

Vertical Tab Glow Active

Vertical tabs with a glowing active item casting ambient light.

#hover #shadow

Live preview Sliders

Anvil Type Size

A live specimen line grows from small to display size the moment the control is engaged.

Live preview Tooltips

3D Rotate Y

Tooltip that rotates fully on the Y axis to appear above the trigger.

Live preview Tooltips

Curve Arrow Top

Tooltip with a curved swooping connector above the trigger.

Live preview Tooltips

Calendar Event

Calendar event tooltip above the trigger.

Live preview Tooltips

Charcoal Noir

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

Live preview Tooltips

Circle Mask

Tooltip reveals with a circle mask opening above the trigger.

Live preview Tooltips

Diamond Grow Clip

Diamond-shaped tooltip that grows from a point above the trigger.

#hover #transform

Live preview Tooltips

Message Tail Clip

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

#hover #transform

Live preview Tooltips

Spiral Shell Clip

Tooltip with a spiral shell-like curved shape.

#hover #transform

Live preview Tooltips

Commit Hash

Git commit hash tooltip above the trigger.

Live preview Tooltips

Confetti Pop

Tooltip with confetti pop animation above the trigger.

Live preview Tooltips

Corners Bracket

Tooltip with corner brackets drawing in above the trigger.

Live preview Tooltips

Cursor Follow

Tooltip that follows the cursor above the trigger.

Live preview Tooltips

Emerald Tip

Emerald green tooltip with subtle shimmer above the trigger.

Live preview Tooltips

Fold Bottom

Tooltip unfolds open below the trigger.

Live preview Tooltips

Glassmorphism Top

Frosted glass tooltip with backdrop blur above the trigger.

Live preview Tooltips

Icon Crown

Tooltip with crown icon above the trigger.

Live preview Tooltips

Light Top

Clean light tooltip with subtle shadow above the trigger.

Live preview Tooltips

Mono Dark

Monospace dark tooltip with terminal feel above the trigger.

Live preview Tooltips

Overline Draw

Tooltip with animated overline drawing above the trigger.

Live preview Tooltips

PowerShell

PowerShell blue background tooltip above the trigger.

Live preview Tooltips

Pulse Attention

Tooltip that pulses to draw attention above the trigger.

Live preview Tooltips

Retro 80s

Retro 80s neon sunset tooltip above the trigger.

Live preview Tooltips

Rich Avatar

Tooltip with user avatar above the trigger.

Live preview Tooltips

Shimmer Loading

Shimmer loading placeholder tooltip above the trigger.

Live preview Tooltips

Sky Blue Info

Sky blue tooltip with airy lightness above the trigger.

Live preview Tooltips

Slide Diagonal Bottom-Right

Tooltip slides in from the bottom-right corner of the trigger.

Live preview Tooltips

Slide Fade Bottom

Tooltip slides up from below while fading in.

Live preview Tooltips

Speech Bubble Top

Cartoon speech bubble tooltip with tail above the trigger.

Live preview Tooltips

Step Counter

Tooltip with step counter indicator above the trigger.

Live preview Tooltips

Sticky Note

Yellow sticky note tooltip with curl above the trigger.

Live preview Tooltips

Typing Hint Tooltip

The tooltip shows three animated dots, as if the hint were still being written.

#border #hover #transform

Live preview Timelines

Wander Stamp Timeline

A travel journal where every stop carries a perforated postage stamp that tilts on hover.

Live preview Accordions

Ridge Search Accordion

Search results collected into collapsible groups with hit counts and paths.

#details #search #hover

Live preview Avatars

Amber Stacked Avatar Group

Four overlapping avatars fan out into a spaced row while hovered.

#group #overlap #hover

Live preview Avatars

Reef Greyscale To Colour Avatar

The drawn portrait sits in greyscale until hover restores its saturated reef palette.

#filter #grayscale #hover

Live preview Badges

Dismissible Chip

Material-style chip with X dismiss button.

#hover #border

Live preview Buttons

Abyss Depth

Bottomless abyss with descending blue gradient.

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

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

Arena Sand

Gladiator-style button with sandy texture.

Live preview Buttons

Asteroid Belt

Asteroid-belt button with floating rock specks.

Live preview Buttons

Auger

Auger-button with a helical screw spiral.

Live preview Buttons

Avocado Pit

Green avocado with brown pit center.

Live preview Buttons

Axletree

Axletree-button with a heavy central iron shaft.

Live preview Buttons

Banana Peel

Yellow banana peel with subtle curve.

Live preview Buttons

Bark Strip

Tree-bark button with vertical striping.

Live preview Buttons

Bessemer Steel

Molten bessemer steel with hot edge.

Live preview Buttons

Black Hole

Black-hole button with an accretion disk rim.

Live preview Buttons

Ink Blot Button

Button whose background blooms like an ink blot on hover.

Live preview Buttons

3D Bounce Button

Candy button that bounces with a 3D spring on hover.

Live preview Buttons

Brickwork

Brickwork button with running-bond pattern.

Live preview Buttons

Cantaloupe Mesh

Orange cantaloupe with mesh-net pattern.

Live preview Buttons

Canvas Paint Button

Button that looks like a painted canvas brush stroke.

Live preview Buttons

Chesapeake Bay

Brackish bay water teal-brown gradient.

Live preview Buttons

Citrus Squeeze

Bright citrus orange-lemon-lime gradient.

Live preview Buttons

Clock Spin Button

Circular button with a clock-hand spinner on hover.

Live preview Buttons

Column Fluted

Fluted column button with vertical grooves.

Live preview Buttons

Copper Wash

Copper button with a brushed wash finish.

Live preview Buttons

Dahlia Bloom

Layered dahlia petals in deep magenta.

Live preview Buttons

Equinox

Equinox button with a balanced day-night split.

Live preview Buttons

Flute Pillar Button

Tall slender button with vertical flute grooves.

Live preview Buttons

Focus Ring Button

Minimal button that gains an accessibility-style focus ring on hover.

#hover #border

Live preview Buttons

Forge Hammer Button

Slate button that looks hammered into shape on hover.

Live preview Buttons

Frame Border Button

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

#hover #shadow #border

Live preview Buttons

Fuchsia Pop

Vivid fuchsia pink with bounce animation.

Live preview Buttons

Gate Valve Button

Industrial gate valve button with horizontal slide reveal.

Live preview Buttons

Gibbous

Gibbous-moon button with a partial curved shadow.

Live preview Buttons

Glacier Ice

Cracked glacier ice with blue depths.

Live preview Buttons

Graphite Pencil

Dark graphite pencil-tip sheen.

Live preview Buttons

Grass Blade Button

Green button with grass blades growing on top.

#hover #gradient #border

Live preview Buttons

Gulf Stream

Gulf-stream button with a flowing blue current.

Live preview Buttons

Honeydew Fresh

Pale honeydew melon green button.

Live preview Buttons

Ship Hull Button

Navy button with riveted hull plates.

Live preview Buttons

Jelly Wobble Button

Translucent jelly button that wobbles like gelatin on hover.