Back to the :hover effects guide

Effects using :hover

The catalog contains 3,196 effects using :hover. The 96 most-viewed examples are shown below. Read the :hover effects guide for a complete explanation.

Alpine Peakbtn-alpine

Floating Bottom Navnav-bottomnav-floating

Orbit Spiralhover-orbit-spiral

Birch Trunkbtn-birch

3D Push Buttonbtn-3d-push

Aurora Borealisbtn-aurora-borealis

Blade Slash Buttonbtn-blade

Quiver Hardhover-quiver-hard

Horizontal Bottom Dot Navnav-dotnav-horizontal-bottom

Savanna Divided Tabstab-savanna-divider

Color Shift Navbarnav-color-shift

3D Chevron Breadcrumbsnav-crumb-3d-chevron

3D Fold Origamitip-3d-fold-origami

Aperture Iris Closehover-aperture-iris

Blink Swaphover-blink

Duotone Magentahover-duotone-magenta

Arrow Curve Bend Navbarnav-arrow-curve-bend

Neon Active Drawer Navbarnav-drawer-neon-active

Float Rise Navbarnav-float-rise

Marble Topline Tabstab-marble-topline

3D Cube Spintip-3d-cube-spin

Square Arrow Lefttip-arrow-square-left

Snow Wintertip-snow-winter

Antique Brassbtn-antique

Barn Owlbtn-barn-owl

Retro Terminal Buttonbtn-retro-terminal

Spotlight Sweep Buttonbtn-spotlight-sweep

Bounce Elastichover-bounce-elastic

Curtain Fallhover-curtain-fall

Neon Shadow Texthover-text-shadow-neon

Wave Ripple Distorthover-wave-ripple-distort

Zoom Blurhover-zoom-blur

Arrow Hexagon Shape Navbarnav-arrow-hexagon-shape

Underline Active Breadcrumbsnav-crumb-underline-active

Elevated Card Navbarnav-elevated-card

Floating Dock Navbarnav-floating-dock

Glass Light Navbarnav-glass-light

Vertical Tab Gradient Bg Flownav-vtab-gradient-bg-flow

Chevron Arrowtip-arrow-chevron

Copper Verified Badge Avatarava-copper-verified

Glide Scrollable Avatar Railava-glide-track

Amber Glow Buttonbtn-amber-glow

Apricot Glowbtn-apricot

Binary Stream Buttonbtn-binary

Bonsai Treebtn-bonsai

Bracket Wrap Buttonbtn-bracket

Brass Bucklebtn-buckle

Ceramic Glazebtn-ceramic

Frosted Ice Buttonbtn-ice-crystal

Nebula Cloudbtn-nebula

Pelagicbtn-pelagic

Rafterbtn-rafter

Tundra Frostbtn-tundra

Vanilla Beanbtn-vanilla

Void Blackbtn-void-black

Wave Crestbtn-wave-crest

Whetstonebtn-whetstone

Yarrowbtn-yarrow

Credit Cardcard-credit

Popup Style Dropdownform-dropdown-popup

Border Gradient Flowhover-border-gradient-flow

Color Invert Pillhover-color-invert

Contrast Punchhover-contrast-punch

Edge Light Uphover-edge-light-up

Needle Right Edgehover-edge-needle-right

Flash Edgeshover-flash-edges

Dashes Crawl Framehover-frame-dashes-crawl

Inset Bevel Framehover-frame-inset-bevel

Glitter Shimmerhover-glitter-shimmer

Glitter Sparklehover-glitter-sparkle

Icon Jump Linkhover-icon-jump

Pixelate Inhover-pixelate-in

Rotate 3D Fliphover-rotate-3d-flip

Slide Random Revealhover-slide-random-reveal

Squash Pancakehover-squash-pancake

Pop Letterhover-text-pop-letter

Soft Shadow Texthover-text-shadow-soft

Topspinhover-topspin

Tritone Foresthover-tritone-forest

Typewriter Revealhover-typewriter-reveal

Warm Overlayhover-warm-overlay

Wipe Downhover-wipe-down

3D Zoom Tilthover-zoom-tilt-3d

3D Arrow Breadcrumbsnav-crumb-3d-arrow

Curve Arrow Breadcrumbsnav-crumb-curve-arrow

Icon Text Breadcrumbsnav-crumb-icon-text

Line Separator Breadcrumbsnav-crumb-line-separator

Pipe Separator Breadcrumbsnav-crumb-pipe-separator

Multi Level Drawer Navbarnav-drawer-multi-level

Stack Cards Drawer Navbarnav-drawer-stack-cards

Tooltip Icon Navnav-iconnav-tooltip

Magnetic Pull Navbarnav-magnetic-pull

Flip In Menunav-menu-flip-in

Push Content Menunav-menu-push-content

Rotate Spin In Modal Navbarnav-modal-rotate-spin-in

Continue exploring

:hover effects guide All guides CSS reference