LibraryCSSÜcretsiz Saf CSS Efekt Kütüphanesi

Navigasyon — 552 Ücretsiz CSS Efekti

Menü çubukları, sekmeler ve gezinme bileşenleri.

Tümü saf CSS — kütüphane, derleme adımı veya JavaScript gerekmez. Kodu kopyalamak ve tarayıcı içi editörde denemek için ücretsiz üyelik yeterli.

Canlı incele Navigation

Floating Bottom Nav

Floating bottom navigation with pill design.

#hover #gradient #shadow

Canlı incele Navigation

Neon Active Drawer Navbar

Drawer with a pulsing neon active indicator on the active link.

#hover #animation #shadow

Canlı incele Navigation

Stamp Ink Press Nav

Active link stamps down with an inked impression effect.

#hover #transform #shadow

Canlı incele Navigation

Pill Bounce Tabs

Pill tabs that bounce into place on active.

#hover #transform #shadow

Canlı incele Navigation

3D Perspective Navbar

Navbar with 3D hover lift and perspective transform.

#hover #transform #shadow

Canlı incele Navigation

3D Tilt X Navbar

Active link tilts on the X-axis with deep perspective.

#hover #transform #shadow

Canlı incele Navigation

3D Tilt XY Navbar

Active link tilts diagonally on both X and Y axes.

#hover #transform #shadow

Canlı incele Navigation

3D Tilt Y Navbar

Active link tilts on the Y-axis with deep perspective.

#hover #transform #shadow

Canlı incele Navigation

Arrow 3D Perspective Navbar

Nav with 3D perspective arrow-shaped active indicator.

#hover #transform #shadow

Canlı incele Navigation

Arrow Asterisk Spin Navbar

Nav with spinning asterisk arrow accent on the active item.

#hover #animation #transform

Canlı incele Navigation

Arrow Bounce Drop Navbar

Nav with arrow indicators that bounce-drop on hover.

#hover #animation #transform

Canlı incele Navigation

Arrow Chevron Point Navbar

Nav with chevron-pointed active indicators.

#hover #transform

Canlı incele Navigation

Arrow Circle Dot Navbar

Nav with circular dot arrow indicators on active items.

#hover #shadow #border

Canlı incele Navigation

Arrow Cross Mark Navbar

Nav with cross-mark arrow accent on the active item.

#hover #transform

Canlı incele Navigation

Arrow Curve Bend Navbar

Nav with curve-bent arrow separators between items.

Canlı incele Navigation

Arrow Diagonal Travel Navbar

Nav links travel diagonally on hover with arrow accents.

#hover #transform

Canlı incele Navigation

Arrow Diamond Shape Navbar

Nav with diamond-shaped arrow indicators on active items.

Canlı incele Navigation

Arrow Double Pointer Navbar

Nav with double-pointer arrow indicators on the active item.

Canlı incele Navigation

Arrow Filled Bg Navbar

Nav with arrow-shaped filled background on the active item.

Canlı incele Navigation

Arrow Flip 3D Navbar

Nav arrow indicators flip in 3D on hover.

#hover #transform #3d

Canlı incele Navigation

Arrow Floating Bob Navbar

Nav links with floating arrow indicators that bob up and down.

#hover #animation #transform

Canlı incele Navigation

Arrow Flow Down Drop Navbar

Vertical nav with arrow indicators flowing downward.

Canlı incele Navigation

Arrow Flow Left Slide Navbar

Nav with arrow-shaped active indicator sliding left on hover.

Canlı incele Navigation

Arrow Flow Right Slide Navbar

Nav with arrow-shaped active indicator sliding right on hover.

Canlı incele Navigation

Arrow Flow Up Rise Navbar

Vertical nav with arrow indicators rising upward.

Canlı incele Navigation

Arrow Glow Active Navbar

Nav with glowing arrow accent on the active item.

Canlı incele Navigation

Arrow Gradient Flow Navbar

Nav with gradient animated arrow indicators.

#hover #animation #gradient

Canlı incele Navigation

Arrow Grow Expand Navbar

Nav arrow indicators grow and expand on hover.

#hover #transform

Canlı incele Navigation

Arrow Heart Beat Navbar

Nav with heart-beat arrow accent on the active item.

#hover #animation #transform

Canlı incele Navigation

Arrow Hexagon Shape Navbar

Nav links shaped as hexagons with arrow flow.

Canlı incele Navigation

Arrow Neon Active Navbar

Nav with neon glowing arrow on the active item.

#hover #animation #shadow

Canlı incele Navigation

Arrow Outline Draw Navbar

Nav with arrow outline drawn on the active item.

#hover #animation #transform

Canlı incele Navigation

Arrow Pentagon Shape Navbar

Nav links shaped as pentagons with arrow flow.

Canlı incele Navigation

Arrow Pill Shape Navbar

Nav with pill-shaped arrow indicators on active items.

Canlı incele Navigation

Arrow Pulse Throb Navbar

Nav arrow indicators pulse and throb on the active item.

#hover #animation #transform

Canlı incele Navigation

Arrow Rotate Spin Navbar

Nav arrow indicators rotate-spin when hovered.

#hover #transform

Canlı incele Navigation

Arrow Shrink Compress Navbar

Nav links compress and shrink with arrow accent on hover.

#hover #transform

Canlı incele Navigation

Arrow Slide Track Navbar

Nav links slide along a track with arrow indicator.

#hover #transform

Canlı incele Navigation

Arrow Square Dot Navbar

Nav with square dot arrow indicators on active items.

#hover #shadow #border

Canlı incele Navigation

Arrow Star Burst Navbar

Nav with star-burst arrow accent on the active item.

#hover #transform

Canlı incele Navigation

Arrow Triangle Point Navbar

Nav with triangle-pointed active indicators.

Canlı incele Navigation

Arrow Triple Stack Navbar

Nav with triple-stacked arrow indicators on the active item.

#hover #transform

Canlı incele Navigation

Arrow Wave Flow Navbar

Nav with wavy arrow flow separators between items.

#hover #animation #transform

Canlı incele Navigation

Arrow Zigzag Flow Navbar

Nav with zigzag-shaped arrow flow separators.

#hover #animation #transform

Canlı incele Navigation

Aurora Background Navbar

Navbar with aurora-like animated gradient blobs.

#hover #animation #gradient

Canlı incele Navigation

Blurred Glass Navbar

Navbar with heavy backdrop blur and gradient border.

#hover #gradient #shadow

Canlı incele Navigation

Bob Buoyant Navbar

Links bob up and down buoyantly on hover.

#hover #animation #gradient

Canlı incele Navigation

Bordered Bottom Navbar

Navbar with thick gradient bottom border.

#hover #gradient #shadow

Canlı incele Navigation

Bordered Top Navbar

Navbar with thick gradient top border.

#hover #gradient #shadow

Canlı incele Navigation

Fixed Bottom Nav

Fixed bottom navigation bar with icons.

#hover #transform

Canlı incele Navigation

Glass Bottom Nav

Glassmorphism bottom navigation.

#hover #shadow #border

Canlı incele Navigation

Glow Bottom Nav

Bottom nav with glowing active item.

#hover #shadow #border

Canlı incele Navigation

Gradient Bottom Nav

Bottom nav with gradient active icon.

#hover #gradient #transform

Canlı incele Navigation

Bounce Drop Navbar

Hovered links drop and bounce in from above with an overshoot.

#hover #transform

Canlı incele Navigation

Breathe Glow Navbar

Active link breathes with a soft expanding glow halo.

#hover #animation #shadow

Canlı incele Navigation

Brutalist Navbar

Raw brutalist navbar with thick borders and offset shadow.

#hover #transform #shadow

Canlı incele Navigation

3D Rotate Hamburger

Hamburger with full 3D rotation on hover.

#hover #transform #border

Canlı incele Navigation

Bounce Hamburger

Hamburger that bounces on hover.

#hover #animation #transform

Canlı incele Navigation

Circle Hamburger

Hamburger inside a circle that morphs on hover.

#hover #transform #border

Canlı incele Navigation

Flip Hamburger

Hamburger that flips on Y axis.

#hover #transform #border

Canlı incele Navigation

Morph to Arrow Hamburger

Hamburger that morphs into a left arrow.

#hover #transform #border

Canlı incele Navigation

Morph to X Hamburger

Hamburger menu icon that morphs to X on hover.

#hover #transform #border

Canlı incele Navigation

Rotate Hamburger

Hamburger with rotating lines on hover.

#hover #transform #border

Canlı incele Navigation

Spin Hamburger

Hamburger that spins 180 degrees on hover.

#hover #transform #border

Canlı incele Navigation

Square Hamburger

Hamburger inside a square that morphs on hover.

#hover #transform #border

Canlı incele Navigation

To Arrow Hamburger

Hamburger that becomes an arrow on hover.

#hover #transform #border

Canlı incele Navigation

To Close Hamburger

Hamburger that becomes an X close icon on hover.

#hover #transform #border

Canlı incele Navigation

To Dots Hamburger

Hamburger that becomes 3 vertical dots on hover.

#hover #transform #border

Canlı incele Navigation

To Grid Hamburger

Hamburger that becomes a 3x3 grid of dots on hover.

Canlı incele Navigation

To Minus Hamburger

Hamburger that becomes a minus line on hover.

#hover #transform #border

Canlı incele Navigation

To Plus Hamburger

Hamburger that becomes a plus sign on hover.

#hover #transform #border

Canlı incele Navigation

Center Logo Navbar

Navbar with the logo centered and split links.

#hover #transform #border

Canlı incele Navigation

Claymorphism Navbar

Soft clay-style navbar with rounded pill links.

#hover #transform #shadow

Canlı incele Navigation

Color Ripple Hover Navbar

Color ripples outward from each link on hover with a radial gradient.

#hover #gradient #transform

Canlı incele Navigation

Color Shift Navbar

Navbar with hue-shifting links on hover.

#hover #animation #gradient

Canlı incele Navigation

Fuzzy Match Palette

Command palette that highlights matched letters in the query string.

Canlı incele Navigation

Keyboard Command Palette

Command palette where each item shows its keyboard shortcut hint.

#hover #shadow #border

Canlı incele Navigation

Recent Commands Palette

Palette grouping commands into Recent and All sections.

#hover #transform #shadow

Canlı incele Navigation

Search Command Palette

Command palette with a search input and filtered command rows.

#hover #shadow #border

Canlı incele Navigation

Coupon Clip Corner Nav

Nav items styled as coupons with clipped circular corners.

#hover #gradient #transform

Canlı incele Navigation

3D Arrow Breadcrumbs

Breadcrumbs with 3D arrow separators.

#hover #gradient #transform

Canlı incele Navigation

3D Chevron Breadcrumbs

Breadcrumbs with 3D chevron separators.

#hover #gradient #transform

Canlı incele Navigation

Animated Arrow Breadcrumbs

Breadcrumbs with animated moving arrows.

#hover #animation #transform

Canlı incele Navigation

Filled Arrow Breadcrumbs

Breadcrumbs styled as filled arrow shapes.

#hover #gradient

Canlı incele Navigation

Arrow Flow Breadcrumbs

Breadcrumbs with arrow-shaped separators.

#hover #gradient

Canlı incele Navigation

Outline Arrow Breadcrumbs

Breadcrumbs with outlined arrow shapes.

Canlı incele Navigation

Background Highlight Breadcrumbs

Breadcrumbs with hover background highlight.

Canlı incele Navigation

Chevron Breadcrumbs

Breadcrumbs with chevron separators.

Canlı incele Navigation

Chevron Fill Breadcrumbs

Breadcrumbs with filled chevron-shaped items.

#hover #gradient

Canlı incele Navigation

Chevron Outline Breadcrumbs

Breadcrumbs with outlined chevron shapes.

Canlı incele Navigation

Circle Background Breadcrumbs

Breadcrumbs with circular item backgrounds.

#hover #gradient #transform

Canlı incele Navigation

Color Active Breadcrumbs

Breadcrumbs with color change on active item.