#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

Top Border Tabs

Tabs with active top border indicator.

#hover #border

Live preview Navigation

Underline Grow Tabs

Tabs with underline that grows from left on active.

#hover #border

Live preview Navigation

Taffy Pull Navbar

Links stretch like taffy when hovered, with a sticky transition.

#hover #transform

Live preview Navigation

Text Cinematic Glow Navbar

Active link has a wide cinematic soft-glow halo behind the text.

#hover #gradient #shadow

Live preview Navigation

Text Glitch Hover Navbar

Hovered links glitch with a split-color RGB shift effect.

#hover #animation #shadow

Live preview Navigation

Text Glow Pulse Link Navbar

Each link has a pulsing text glow that intensifies on hover.

#hover #animation #shadow

Live preview Navigation

Text Shadow Dance Navbar

Hovered links perform a layered text-shadow dance animation.

#hover #animation #shadow

Live preview Navigation

Uppercase Grow Navbar

Hovered link transforms to uppercase with smooth spacing growth.

#hover #transform #shadow

Live preview Navigation

3D Tilt Hover Navbar

Each link tilts in 3D space responding to hover with depth perspective.

#hover #gradient #transform

Live preview Navigation

Transparent Overlay Navbar

Transparent navbar that turns solid on hover.

#hover #shadow

Live preview Navigation

Chevron Collapsible Treeview

Tree menu where chevrons rotate as the group expands on hover.

#hover #transform

Live preview Navigation

Connector Line Treeview

Tree menu with L-shaped connector lines linking parents to children.

#hover #transform #border

Live preview Navigation

Folder Expand Treeview

Tree menu where folder groups expand their children on hover.

#hover

Live preview Navigation

Vertical Tab Right Arrow Pointer

Vertical tabs with a right-pointing arrow on the active item.

#hover #transform #border

Live preview Navigation

Vertical Tab Left Border Active

Vertical tabs with a glowing left border on the active item.

#hover #shadow #border

Live preview Navigation

Vertical Tab Circle Bg Active

Vertical tabs with a circular active background indicator.

#hover #transform #shadow

Live preview Navigation

Vertical Tab Collapsible Tree

Vertical tabs in a collapsible tree structure with sub-items.

#hover

Live preview Navigation

Vertical Tab Color Shift

Vertical tabs that shift through accent colors on hover.

#hover #shadow

Live preview Navigation

Vertical Tab Counter Badge

Vertical tabs with a counter badge showing item counts.

#hover

Live preview Navigation

Vertical Tab Flip Card

Vertical tabs that flip in 3D when active, revealing content.

#hover #transform #shadow

Live preview Navigation

Vertical Tab Icon Leading

Vertical tabs with leading icons that scale on active.

#hover #transform

Live preview Navigation

Vertical Tab Neon Active Line

Vertical tabs with a pulsing neon active line indicator.

#hover #animation #transform

Live preview Navigation

Vertical Tab Rounded Soft

Soft rounded vertical tabs with gentle hover transitions.

#hover #shadow

Live preview Navigation

Vertical Tab Square Sharp

Sharp square vertical tabs with brutalist styling.

#hover #transform #border

Live preview Navigation

Vertical Tab Tree Branch

Vertical tabs with a tree branch connector line between levels.

#hover

Live preview Navigation

Vertical Tab Underline Slide

Vertical tab nav where the active underline slides between items.

#hover #transform #shadow

Live preview Navigation

Diagonal Wipe Reveal Nav

Diagonal wipe transitions across the nav when hovering different items.

#hover #gradient #transform

Live preview Navigation

Wipe Left Reveal Nav

Active tab revealed by a leftward wipe that sweeps across the nav.

#hover #gradient #transform

Live preview Navigation

Wobble Jiggle Navbar

Links wobble-jiggle on hover using a keyframe animation.

#hover #animation #transform

Live preview Sliders

Chassis Steering Feel

A CSS steering wheel turns as the pointer arrives while the rail sets lock-to-lock travel.

#slider #steering #hover

Live preview Sliders

Copper Diamond Slider

A tilted copper lozenge glides on a thin wire and opens up when hovered.

#slider #diamond #transform

Live preview Tabs

Willow Hover Preview Tabs

Hovering grows a faint half underline first, so the click only completes the line.

#hover #underline #transform

Live preview Tables

Shaft File Manifest

A file listing where the extension sits in a coloured tile that tips forward under the pointer.

#table #files #badge

Live preview Text

Fill Sweep On Hover

Outlined text that fills with a solid color from bottom to top on hover.

#hover #css

Live preview Tooltips

Dashed Arrow Left

Tooltip to the left of the trigger with a dashed connector.

#hover #transform #border

Live preview Tooltips

Diamond Arrow Left

Tooltip with a diamond-shaped pointer on the left side.

#hover #transform

Live preview Tooltips

Double Arrow Left

Tooltip with stacked double-chevron arrow pointing right.

#hover #transform #border

Live preview Tooltips

Double Arrow Right

Tooltip with stacked double-chevron arrow pointing left.

#hover #transform #border

Live preview Tooltips

Line Arrow

Tooltip connected by a thin line above the trigger.

#hover #transform

Live preview Tooltips

No Arrow

Clean tooltip without any arrow above the trigger.

#hover #transform

Live preview Tooltips

Rounded Arrow Bottom

Tooltip with a rounded pill-shaped arrow nub pointing up.

#hover #transform

Live preview Tooltips

Triangle Arrow Top

Tooltip with prominent triangle arrow above the trigger.

#hover #transform #border

Live preview Tooltips

Aurora Borealis

Northern-lights aurora borealis gradient tooltip.

#hover #gradient #transform

Live preview Tooltips

BG Aurora

Tooltip with aurora gradient background above the trigger.

#hover #animation #gradient

Live preview Tooltips

BG Mesh

Tooltip with mesh gradient background above the trigger.

#hover #gradient #transform

Live preview Tooltips

BG Plasma

Tooltip with plasma gradient background above the trigger.

#hover #gradient #transform

Live preview Tooltips

BG Radial

Tooltip background radiates from center above the trigger.

#hover #gradient #transform

Live preview Tooltips

Blinds Open

Tooltip reveals like venetian blinds opening above the trigger.

#hover #transform #border

Live preview Tooltips

Book Page

Book page tooltip with double-page book styling.

#hover #transform #shadow

Live preview Tooltips

Branch Name

Git branch name tooltip above the trigger.

#hover #transform #border

Live preview Tooltips

Burnt Orange Glow

Warm burnt orange tooltip with a soft ambient glow.

#hover #transform #shadow

Live preview Tooltips

Carbon Fiber

Carbon fiber weave texture tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Char Flip

Tooltip characters flip in sequence above the trigger.

#hover #transform #border

Live preview Tooltips

Circle Mask Right

Tooltip reveals via an expanding circle mask from the right.

#hover #transform #border

Live preview Tooltips

Arc Bottom Clip

Tooltip with a curved arc-shaped bottom edge clip-path.

#hover #transform

Live preview Tooltips

Arc Right Clip

Tooltip with a curved arc-shaped right edge clip-path.

#hover #transform

Live preview Tooltips

Circle Grow

Tooltip reveals through a growing circular clip mask.

#hover #transform

Live preview Tooltips

Funnel Clip

Tooltip with a funnel-shaped narrow bottom clip-path.

#hover #transform

Live preview Tooltips

Clip Hex Left

Hexagon-shaped tooltip clipped into form on the left.

#hover #transform

Live preview Tooltips

Leaf Clip

Leaf-shaped tooltip with a curved organic clip-path.

#hover #transform

Live preview Tooltips

Notch Corner BR Clip

Tooltip with a notched bottom-right corner clip-path.

#hover #transform

Live preview Tooltips

Octagon Clip

Octagon-shaped tooltip clipped into form above the trigger.

#hover #transform

Live preview Tooltips

Triangle Clip Right

Triangle-shaped tooltip pointer to the right of the trigger.

#hover #transform

Live preview Tooltips

Wedge Right Clip

Tooltip with a wedge-shaped right edge clip-path.

#hover #transform

Live preview Tooltips

Wedge Top Clip

Tooltip with a wedge-shaped top edge clip-path.

#hover #transform

Live preview Tooltips

Zigzag Edge Clip

Tooltip with a zigzag bottom edge clip-path.

#hover #transform

Live preview Tooltips

Code Line Numbers

Tooltip with line-numbered code above the trigger.

#hover #transform #shadow

Live preview Tooltips

Comet Tail

Comet tail tooltip with trailing gradient streak.

#hover #gradient #transform

Live preview Tooltips

Coral Sunset Pink

Warm coral-to-pink gradient tooltip evoking a sunset.

#hover #gradient #transform

Live preview Tooltips

Coupon Edge

Tooltip styled like a coupon with notched edges.

#hover #transform

Live preview Tooltips

Crystal Spark

Crystal-like sparkling tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Curtain Left

Tooltip reveals like a curtain opening to the left.

#hover #transform #border

Live preview Tooltips

Cyber Grid

Cyberpunk grid pattern tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Dashed Border Bottom

Tooltip with a dashed border below the trigger.

#hover #transform #border

Live preview Tooltips

Dashed Border Right

Tooltip with a dashed border on the right side.

#hover #transform #border

Live preview Tooltips

Date Picker

Date picker style tooltip above the trigger.

#hover #transform #shadow

Live preview Tooltips

Deep Teal Pool

Teal tooltip with a subtle aqua gradient pool effect.

#hover #gradient #transform

Live preview Tooltips

Denim Fabric

Denim fabric texture tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Discrete Transition Tooltip

The bubble animates in from display none using allow-discrete and @starting-style.

#hover #transform #border

Live preview Tooltips

Dotted Border Right

Tooltip with a dotted border on the right side.

#hover #transform #border

Live preview Tooltips

Double Frame Bottom

Tooltip with an outer double-frame border below the trigger.

#hover #transform #shadow

Live preview Tooltips

Double Frame Top

Tooltip with an outer double-frame border above the trigger.

#hover #transform #shadow

Live preview Tooltips

Error Stack

Error stack trace style tooltip above the trigger.

#hover #transform #shadow

Live preview Tooltips

Fade Right

Tooltip fades in on the right side pointing left.

#hover #transform #border

Live preview Tooltips

Fan Out Tip

Tooltip that fans out from a point above the trigger.

#hover #transform #border

Live preview Tooltips

Feature Card

Feature highlight card tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Flash Strobe

Tooltip that flashes with a strobe-like opacity animation.

#hover #animation #transform

Live preview Tooltips

Flip X Left

3D flip tooltip on X axis revealing from the left.

#hover #transform #border

Live preview Tooltips

Flip X Right

3D flip tooltip on X axis revealing from the right.

#hover #transform #border

Live preview Tooltips

Glass Frost Cold

Cool-toned frosted glass tooltip with cold blue tint.

#hover #transform #shadow

Live preview Tooltips

Glass Iridescent

Iridescent glass tooltip with a rainbow shimmer overlay.

#hover #gradient #transform

Live preview Tooltips

Green Success

Green success tooltip with checkmark styling above the trigger.

#hover #transform #shadow

Live preview Tooltips

Groove Border Top

Tooltip with a 3D grooved border above the trigger.

#hover #transform #border

Live preview Tooltips

Icon Help

Tooltip with question mark icon above the trigger.

#hover #transform #border

Live preview Tooltips

Inset Border Top

Tooltip with an inset 3D border above the trigger.

#hover #transform #border

Effects tagged #hover

Popular tags