En Popüler CSS Efektleri (Sayfa 81)

Canlı incele Navigasyon

Mesh Gradient Navbar

Navbar with a layered mesh gradient background.

#hover #gradient #shadow

Canlı incele Navigasyon

Minimal Underline Navbar

Underline-only navbar with thin animated indicator.

#hover

Canlı incele Navigasyon

3D Perspective Modal Navbar

Modal nav that flies in from depth using perspective translateZ.

#hover #animation #transform

Canlı incele Navigasyon

Blurred Backdrop Modal Navbar

Centered modal nav over a heavily blurred colored backdrop.

#hover #animation #gradient

Canlı incele Navigasyon

3D Flip In Modal Navbar

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

#hover #animation #transform

Canlı incele Navigasyon

Fullscreen Modal Cover Navbar

Fullscreen modal cover with large centered nav links.

#hover #animation #transform

Canlı incele Navigasyon

Glass Popup Modal Navbar

Glassmorphism modal popup nav with frosted translucent surface.

#hover #animation #gradient

Canlı incele Navigasyon

Slide Down Modal Navbar

Centered modal nav that slides down from the top.

#hover #animation #gradient

Canlı incele Navigasyon

Zoom In Modal Navbar

Centered modal nav that zooms in from a smaller scale.

#hover #animation #gradient

Canlı incele Navigasyon

Monochrome Navbar

Black and white monochrome navbar.

#hover #border

Canlı incele Navigasyon

Neumorphic Navbar

Soft neumorphic navbar with extruded buttons.

#hover #shadow

Canlı incele Navigasyon

Ocean Blue Navbar

Ocean blue navbar with wave-like gradient.

#hover #gradient #shadow

Canlı incele Navigasyon

OKLCH Menu Bar

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

#hover #border #oklch

Canlı incele Navigasyon

Circular Orbit Menu

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

#hover #gradient #transform

Canlı incele Navigasyon

Planet Rotation Menu

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

#hover #animation #gradient

Canlı incele Navigasyon

Radial Burst Menu

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

#hover #transform #shadow

Canlı incele Navigasyon

Ring Spin Menu

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

#hover #animation #gradient

Canlı incele Navigasyon

Solar System Menu

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

#hover #animation #gradient

Canlı incele Navigasyon

Dark Blurred Overlay Navbar

Dark overlay with heavy backdrop blur covering the page content.

#hover #animation #gradient

Canlı incele Navigasyon

Bottom Sheet Handle Navbar

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

#hover #animation #gradient

Canlı incele Navigasyon

Side Panel Tabs Navbar

Side panel with vertical tabs over a dimmed overlay.

#hover #animation #gradient

Canlı incele Navigasyon

Active 3D Pagination

Active page lifts in 3D perspective.

#hover #gradient #transform

Canlı incele Navigasyon

Active Border Pagination

Active page has animated border.

#hover #transform #border

Canlı incele Navigasyon

Active Fill Pagination

Active page fills with color animation.

#hover #transform

Canlı incele Navigasyon

Active Pulse Pagination

Active page pulses with animation.

#hover #animation #shadow

Canlı incele Navigasyon

Active Rotate Pagination

Active page rotates slightly.

#hover #transform #shadow

Canlı incele Navigasyon

Active Scale Pagination

Active page scales up with bounce.

#hover #transform #shadow

Canlı incele Navigasyon

Active Shadow Pagination

Active page has deep shadow.

#hover #transform #shadow

Canlı incele Navigasyon

Arrow Bounce Pagination

Pagination with bouncing arrow buttons on hover.

#hover #animation #transform

Canlı incele Navigasyon

Arrow Slide Pagination

Pagination with sliding arrows on hover.

#hover #transform

Canlı incele Navigasyon

Arrow Square Pagination

Pagination with square arrow buttons.

#hover #border

Canlı incele Navigasyon

Circular Pagination

Pagination with circular number buttons.

#hover #gradient #transform

Canlı incele Navigasyon

Dots Pagination

Pagination as a row of dots with active state.

#hover #transform #shadow

Canlı incele Navigasyon

Floating Pagination

Pagination with floating shadow on hover.

#hover #transform #shadow

Canlı incele Navigasyon

Glow Pagination

Pagination with glowing active button.

#hover #shadow

Canlı incele Navigasyon

Gradient Pagination

Pagination with gradient active button.

#hover #animation #gradient

Canlı incele Navigasyon

Hover 3D Pagination

Numbers lift in 3D on hover.

#hover #gradient #transform

Canlı incele Navigasyon

Hover Circle Pagination

Numbers morph to circle on hover.

#hover

Canlı incele Navigasyon

Hover Flip Pagination

Numbers flip on hover.

#hover #transform #3d

Canlı incele Navigasyon

Hover Glow Pagination

Numbers glow on hover.

#hover #shadow

Canlı incele Navigasyon

Hover Grow Pagination

Pages grow on hover.

#hover #transform

Canlı incele Navigasyon

Hover Pill Pagination

Numbers morph to pill on hover.

#hover

Canlı incele Navigasyon

Hover Rotate Pagination

Numbers rotate on hover.

#hover #transform

Canlı incele Navigasyon

Hover Shrink Pagination

Inactive numbers shrink, active stays normal.

#hover #transform

Canlı incele Navigasyon

Hover Square Pagination

Numbers morph to square on hover.

#hover

Canlı incele Navigasyon

Hover Underline Pagination

Numbers show underline on hover.

#hover #transform

Canlı incele Navigasyon

Infinite Scroll Pagination

Animated loading indicator for infinite scroll.

#animation #transform

Canlı incele Navigasyon

Load More Pagination

Single load more button pagination.

#hover #transform #shadow

Canlı incele Navigasyon

Load More Button Pagination

Stylized load more button with shimmer.

#hover #animation #gradient

Canlı incele Navigasyon

Neon Pagination

Dark neon themed pagination.

#hover #transform #shadow

Canlı incele Navigasyon

Number 3D Pagination

Numbers with 3D lift on hover.

#hover #gradient #transform

Canlı incele Navigasyon

Number Circle Pagination

Numbers in circles with active highlight.

#hover #gradient #transform

Canlı incele Navigasyon

Number Flip Pagination

Numbers flip on Y axis on hover.

#hover #transform #3d

Canlı incele Navigasyon

Number Grow Pagination

Active number grows larger than others.

#hover #transform #shadow

Canlı incele Navigasyon

Number Pill Pagination

Active number morphs into pill shape.

#hover

Canlı incele Navigasyon

Number Rotate Pagination

Numbers rotate slightly on hover.

#hover #transform

Canlı incele Navigasyon

Number Shrink Pagination

Inactive numbers shrink, active stays large.

#hover #transform #shadow

Canlı incele Navigasyon

Number Square Pagination

Square number buttons pagination.

#hover

Canlı incele Navigasyon

Number Underline Pagination

Active number has underline indicator.

#hover #transform

Canlı incele Navigasyon

Numbered Pagination

Classic numbered pagination with active highlight.

#hover #shadow

Canlı incele Navigasyon

Pill Pagination

Pill-shaped pagination numbers.

#hover #gradient

Canlı incele Navigasyon

Prev Next Pagination

Simple prev/next pagination buttons.

#hover #transform

Canlı incele Navigasyon

Progress Bar Pagination

Pagination with a progress bar above numbers.

#hover #animation #gradient

Canlı incele Navigasyon

Rounded Pagination

Pagination with rounded square buttons.

#hover #shadow

Canlı incele Navigasyon

Square Pagination

Square-shaped pagination buttons.

#hover

Canlı incele Navigasyon

Step Indicator Pagination

Pagination styled as a step indicator.

#hover

Canlı incele Navigasyon

Pastel Soft Navbar

Soft pastel navbar with gentle colors.

#hover #gradient

Canlı incele Navigasyon

Perspective Tilt Navbar

Active link lifts forward in 3D perspective with translateZ.

#hover #transform #shadow

Canlı incele Navigasyon

Pill Highlight Nav

A rounded highlight sits behind the hovered item and scales in from its centre.

#hover #transform #border

Canlı incele Navigasyon

3D Pill Nav

Pill nav with 3D extruded active pill.

#hover #gradient #transform

Canlı incele Navigasyon

Floating Pill Nav

Floating pill navigation with shadow.

#hover #gradient #shadow

Canlı incele Navigasyon

Glow Pill Nav

Pill nav with glowing active pill.

#hover #shadow #border

Canlı incele Navigasyon

Gradient Pill Nav

Pill nav with animated gradient active state.

#hover #animation #gradient

Canlı incele Navigasyon

Horizontal Pill Nav

Horizontal pill navigation.

#hover #shadow

Canlı incele Navigasyon

Neon Pill Nav

Neon themed pill navigation.

#hover #transform #shadow

Canlı incele Navigasyon

Vertical Pill Nav

Vertical pill navigation.

#hover #gradient #shadow

Canlı incele Navigasyon

Pinned Top Navbar

Top-pinned navbar with full width and sticky look.

#hover #shadow #border

Canlı incele Navigasyon

Polaroid Tilt Stack Nav

Polaroid-photo style nav items stacked at alternating tilts.

#hover #transform #shadow

Canlı incele Navigasyon

Press Sink Navbar

Active link presses into the bar with an inset shadow depth effect.

#hover #shadow

Canlı incele Navigasyon

Glow Trail Step Nav

Stepper with a glowing trail line that pulses along the active path.

#hover #animation #gradient

Canlı incele Navigasyon

Milestone Marker Nav

Horizontal milestone track with markers that pop up on hover.

#hover #gradient #transform

Canlı incele Navigasyon

Progress Ring Tracker Nav

Vertical step tracker with circular progress rings on each milestone.

#hover #gradient #transform

Canlı incele Navigasyon

Vertical Timeline Nav

Timeline nav with a center spine and milestone dots that activate on hover.

#hover #gradient #transform

Canlı incele Navigasyon

Receipt Jagged Edge Nav

Receipt paper nav with jagged torn bottom edge and active highlight.

#hover #transform #shadow

Canlı incele Navigasyon

Ribbon Banner Curl Nav

Active ribbon banner with a curled corner peeling up on hover.

#hover #gradient #transform

Canlı incele Navigasyon

Ribbon Banner Flow Nav

Decorative ribbon banner that flows across the top of the nav items.

#hover #animation #gradient

Canlı incele Navigasyon

Ribbon Flag Wave Nav

Active tab styled as a waving flag ribbon extending below the link.

#hover #animation #gradient

Canlı incele Navigasyon

Full Rotate Navbar

Links spin a full 360 degrees with a smooth rotation on hover.

#hover #transform

Canlı incele Navigasyon

Half Rotate Navbar

Links flip 180 degrees on hover, mirroring the text.

#hover #transform

Canlı incele Navigasyon

Quarter Rotate Navbar

Links rotate 90 degrees on hover, revealing an icon face.

#hover #transform

Canlı incele Navigasyon

Rounded Pill Navbar

Fully rounded pill-shaped navbar with sliding indicator.

#hover #gradient

Canlı incele Navigasyon

Royal Purple Navbar

Royal purple navbar with golden accents.

#hover #gradient #shadow

Canlı incele Navigasyon

Rubber Stretch Navbar

Hovered links stretch horizontally like rubber then snap back.

#hover #transform

Canlı incele Navigasyon

Scroll Progress Bar

A reading progress bar driven by scroll-linked animation, with no script at all.

#animation #gradient #transform

Canlı incele Navigasyon

3D Segmented Control

Segmented control with 3D pressed and raised segments.

#hover #gradient #transform

Canlı incele Navigasyon

Fill Segmented Control

Segmented control with a left-to-right color fill on the active segment.

#hover #gradient #transform

Kategoriye göre gez

Popüler etiketler