# hover CSS effects

Live preview Navigation

Floating Left Dot Nav

Floating dot navigation on left with shadow.

Live preview Navigation

Floating Right Dot Nav

Floating dot navigation with shadow.

Live preview Navigation

Floating Top Dot Nav

Floating dot navigation at top.

Live preview Navigation

Glow Dot Nav

Dot nav with glowing active dot.

Live preview Navigation

Gradient Dot Nav

Dot nav with gradient active dot.

Live preview Navigation

Neon Dot Nav

Neon themed dot navigation.

Live preview Navigation

Square Dot Nav

Dot nav with square-shaped dots.

Live preview Navigation

Vertical Left Dot Nav

Vertical dot navigation fixed to left side.

Live preview Navigation

Vertical Right Dot Nav

Vertical dot navigation fixed to right side.

Live preview Navigation

3D Perspective Drawer Navbar

Drawer with a 3D perspective active link lifting forward.

Live preview Navigation

Brutalist Block Drawer Navbar

Drawer with raw brutalist block styling, sharp borders, and offset shadow.

Live preview Navigation

Cascading Multi Drawer Navbar

Multi-level cascading drawer with progressively indented levels.

Live preview Navigation

Collapsible Arrow Drawer Navbar

Drawer with collapsible sections toggled by an arrow indicator.

Live preview Navigation

Dark Panel Drawer Navbar

Dark panel drawer with subtle border accents.

Live preview Navigation

Floating Overlay Drawer Navbar

Floating drawer that overlays content without pushing it.

Live preview Navigation

Glow Edge Drawer Navbar

Drawer with a glowing active edge in indigo neon.

Live preview Navigation

Nested Accordion Drawer Navbar

Accordion drawer with expandable sections revealing sub-links.

Live preview Navigation

Neumorphic Panel Drawer Navbar

Drawer with soft neumorphic embossed styling.

Live preview Navigation

Blur Overlay Drawer Navbar

Drawer over a frosted blurred backdrop.

Live preview Navigation

Dim Overlay Drawer Navbar

Drawer over a dimmed dark overlay backdrop.

Live preview Navigation

Pin Sticky Drawer Navbar

Drawer with a pinned sticky header that stays at the top.

Live preview Navigation

Pinned Side Drawer Navbar

Pinned left-side drawer that persists beside the main content.

Live preview Navigation

3D Left Drawer Navbar

Left drawer with 3D perspective slide revealing main nav beside it.

Live preview Navigation

3D Right Drawer Navbar

Right drawer with 3D perspective slide.

#hover #transform #border

Live preview Navigation

Square Sharp Drawer Navbar

Drawer with sharp square corners and bold contrast.

Live preview Navigation

Fading Dropdown Menu

The submenu drops a few pixels and fades in, staying open while the pointer is inside.

Live preview Navigation

3D Flip Card Navbar

Each link is a 3D flip card revealing a back face on hover.

#hover #transform #3d

Live preview Navigation

Horizontal Flip Navbar

Links flip horizontally (Y-axis) on hover for a side reveal.

#hover #transform #3d

Live preview Navigation

Vertical Flip Navbar

Links flip vertically (X-axis) on hover for a top-down reveal.

#hover #transform #3d

Live preview Navigation

Floating Action Navbar

Navbar with floating action-style buttons.

Live preview Navigation

Floating Glass Navbar

Detached floating glass navbar with strong blur.

Live preview Navigation

Floating Pill Navbar

Floating rounded pill navbar with a sliding active indicator.

Live preview Navigation

Frosted Edge Navbar

Frosted navbar with crystal edge highlight.

Live preview Navigation

Glassmorphism Navbar

Frosted glass navbar with backdrop blur and translucent background.

#hover #animation #shadow

Live preview Navigation

Glow Pulse Navbar

Navbar with pulsing glow around active link.

Live preview Navigation

Gradient Border Navbar

Navbar with animated gradient border around active link.

Live preview Navigation

Has-Selector Active Nav

Selecting a radio marks the item active and shifts the whole bar accent with :has().

Live preview Navigation

Holographic Navbar

Navbar with holographic gradient overlay.

Live preview Navigation

Circle Icon Nav

Icon nav with circular icons.

Live preview Navigation

Floating Icon Nav

Floating icon navigation with shadow.

Live preview Navigation

Glow Icon Nav

Icon nav with glowing active icon.

Live preview Navigation

Gradient Icon Nav

Icon nav with animated gradient background.

Live preview Navigation

Horizontal Icon Nav

Horizontal icon-only navigation.

Live preview Navigation

Neon Icon Nav

Neon themed icon navigation.

Live preview Navigation

Vertical Icon Nav

Vertical icon navigation.

Live preview Navigation

Iris Aperture Spin Nav

Iris aperture blades that spin open like a camera shutter on hover.

Live preview Navigation

Iris Aperture Zoom Nav

Iris aperture that zooms open to reveal nav links in the center.

Live preview Navigation

Lift Soar Navbar

Links lift and soar upward with strong shadow projection.

Live preview Navigation

Light Blur Navbar

Light navbar with translucent blur and soft glow.

Live preview Navigation

Light Clean Navbar

Clean white navbar with soft shadow and pill active state.

Live preview Navigation

Mega Shadow Navbar

Navbar with multiple layered shadows for depth.

Live preview Navigation

Accordion Menu

Accordion menu with expandable sections.

Live preview Navigation

Hover Dropdown Menu

Dropdown menu revealed on hover.

Live preview Navigation

Fade In Menu

Menu that fades in on toggle.

Live preview Navigation

Flyout Menu

Menu with flyout submenu on hover.

Live preview Navigation

Horizontal Dropdown Menu

Horizontal menu with dropdown items.

Live preview Navigation

Mega Menu

Large mega menu panel with multiple link groups.

Live preview Navigation

Full Overlay Menu

Full screen overlay menu.

Live preview Navigation

Rotate In Menu

Menu that rotates in from corner.

Live preview Navigation

Side Panel Menu

Side panel menu that opens from the right.

Live preview Navigation

Slide In Menu

Menu that slides in from the left.

Live preview Navigation

Zoom In Menu

Menu that zooms in from trigger.

Live preview Navigation

Mesh Gradient Navbar

Navbar with a layered mesh gradient background.

Live preview Navigation

Minimal Underline Navbar

Underline-only navbar with thin animated indicator.

#hover

Live preview Navigation

3D Perspective Modal Navbar

Modal nav that flies in from depth using perspective translateZ.

Live preview Navigation

Blurred Backdrop Modal Navbar

Centered modal nav over a heavily blurred colored backdrop.

Live preview Navigation

3D Flip In Modal Navbar

Centered modal nav that flips in on the Y axis with 3D depth.

Live preview Navigation

Fullscreen Modal Cover Navbar

Fullscreen modal cover with large centered nav links.

Live preview Navigation

Glass Popup Modal Navbar

Glassmorphism modal popup nav with frosted translucent surface.

Live preview Navigation

Slide Down Modal Navbar

Centered modal nav that slides down from the top.

Live preview Navigation

Zoom In Modal Navbar

Centered modal nav that zooms in from a smaller scale.

Live preview Navigation

Monochrome Navbar

Black and white monochrome navbar.

Live preview Navigation

Neumorphic Navbar

Soft neumorphic navbar with extruded buttons.

Live preview Navigation

Ocean Blue Navbar

Ocean blue navbar with wave-like gradient.

Live preview Navigation

OKLCH Menu Bar

Bar, hover and active layers are three color-mix steps off a single OKLCH accent.

#hover #border #oklch

Live preview Navigation

Circular Orbit Menu

Center button with menu items orbiting in a circle around it.

Live preview Navigation

Planet Rotation Menu

Center sun with planet items rotating around it on a continuous orbit path.

Live preview Navigation

Radial Burst Menu

Items burst outward radially from a center trigger with staggered timing.

Live preview Navigation

Ring Spin Menu

Menu items arranged on a ring that continuously rotates with hover-pause.

Live preview Navigation

Solar System Menu

Solar system layout with planets on concentric orbit rings of different speeds.

Live preview Navigation

Dark Blurred Overlay Navbar

Dark overlay with heavy backdrop blur covering the page content.

Live preview Navigation

Bottom Sheet Handle Navbar

Bottom sheet with a draggable handle and pull-up indicator.

Live preview Navigation

Side Panel Tabs Navbar

Side panel with vertical tabs over a dimmed overlay.

Live preview Navigation

Active 3D Pagination

Active page lifts in 3D perspective.

#hover #transform #border

Live preview Navigation

Active Border Pagination

Active page has animated border.

Live preview Navigation

Active Fill Pagination

Active page fills with color animation.

#hover #animation #shadow

Live preview Navigation

Active Pulse Pagination

Active page pulses with animation.

Live preview Navigation

Active Rotate Pagination

Active page rotates slightly.

Live preview Navigation

Active Scale Pagination

Active page scales up with bounce.

Live preview Navigation

Active Shadow Pagination

Active page has deep shadow.

Live preview Navigation

Arrow Bounce Pagination

Pagination with bouncing arrow buttons on hover.

Live preview Navigation

Arrow Slide Pagination

Pagination with sliding arrows on hover.

Live preview Navigation

Arrow Square Pagination

Pagination with square arrow buttons.

Live preview Navigation

Circular Pagination

Pagination with circular number buttons.

Live preview Navigation

Dots Pagination

Pagination as a row of dots with active state.