LibraryCSSÜcretsiz Saf CSS Efekt Kütüphanesi

#border CSS efektleri

"border" etiketiyle eşleşen 3.995 ücretsiz saf CSS efekti. Hepsi kopyala-yapıştır hazır; kullanmak için kütüphane veya derleme adımı gerekmez.

Canlı incele Formlar

Grow Icon Input

Input whose icon grows in size when focused.

#transform #shadow #border

Canlı incele Formlar

Shrink Icon Input

Input whose icon shrinks when focused (inverse effect).

#transform #shadow #border

Canlı incele Formlar

Tag Icon Input

Tag input with tag icon that flips in on focus.

#transform #shadow #border

Canlı incele Formlar

Search Input with Clear Button

Search input that shows a clear (×) button when typed.

#hover #transform #shadow

Canlı incele Formlar

Floating Label OTP

OTP boxes with floating placeholder text.

#transform #border

Canlı incele Formlar

Bounce Radio

Radio indicator bounces in with springy motion on selection.

#animation #transform #border

Canlı incele Formlar

Ripple Radio

Radio with ripple effect emanating from center on selection.

#animation #transform #border

Canlı incele Formlar

Shake Radio

Radio options shake briefly when selected for tactile feedback.

#animation #transform #border

Canlı incele Formlar

3D Search Bar

Skeuomorphic 3D search bar with depth.

#transform #shadow #border

Canlı incele Formlar

Icon Background Search

Search bar with icon in a colored background square.

#transform #shadow #border

Canlı incele Formlar

Light Themed Select

Clean light-themed select with subtle shadow.

#transform #shadow #border

Canlı incele Formlar

Square Select Dropdown

Sharp-cornered square select with bold border.

#transform #border

Canlı incele Formlar

Minimal Slider

Ultra-minimal slider with thin track and small thumb.

#shadow #border

Canlı incele Formlar

Success State Input

Input showing success state with green border and checkmark icon.

#animation #transform #shadow

Canlı incele Formlar

Segmented Switch

Segmented toggle group with sliding indicator between options.

#hover #shadow #border

Canlı incele Formlar

Bordered Textarea

Textarea with a colored left accent border.

#shadow #border

Canlı incele Formlar

Glassmorphism Textarea

Frosted glass textarea with translucent background.

#shadow #border #filter

Canlı incele Formlar

Brutalist Hard Edge Input

Brutalist design with hard borders, monospace and offset shadow.

#transform #shadow #border

Canlı incele Formlar

Flat Material Input

Flat material design input with no shadows or bevels.

Canlı incele Formlar

Light Glassmorphism Input

Light frosted glass input with soft white glow on focus.

#gradient #shadow #border

Canlı incele Formlar

Neumorphic Soft Input

Soft neumorphic input with inset shadow on focus.

#shadow #border

Canlı incele Formlar

Valid Check Mark Input

Input that shows a green checkmark when valid.

#transform #shadow #border

Canlı incele Formlar

Valid Icon Input

Input with a checkmark icon that appears when valid.

#transform #shadow #border

Canlı incele Formlar

Success State Input

Input with full success state — green border, check, and label color.

#transform #shadow #border

Canlı incele Formlar

Valid Underline Input

Bottom underline grows in green when valid.

#transform #border

Canlı incele Hover

Border Dash March

Dashed border marches around on hover.

#hover #animation #border

Canlı incele Hover

Border Draw Full

Border draws around all sides on hover.

Canlı incele Hover

Border Expand Out

Border outline expands outward on hover.

#hover #transform #border

Canlı incele Hover

Border Glow Trace

Glowing dot traces around border on hover.

#hover #animation #gradient

Canlı incele Hover

Border Rainbow Flow

Rainbow border flows on hover.

#hover #animation #gradient

Canlı incele Hover

Color Swap Fast

Foreground and background colors swap on hover.

#hover #transform #border

Canlı incele Hover

Curtain Open

Two colored curtains split apart horizontally to reveal content on hover.

#gradient #hover #shadow

Canlı incele Hover

Cyber Glitch

Cyberpunk RGB-split glitch with rapid clip-path jumps on hover.

#animation #hover #border

Canlı incele Hover

Dissolve to Dots

A dotted overlay fades in over the panel, dissolving the content into a dot matrix on hover.

#gradient #hover #border

Canlı incele Hover

Explode Out

Colored shards burst outward in all directions with scaling and fading on hover.

#gradient #hover #border

Canlı incele Hover

Flip 3D Door

Door-swing 3D flip on hover.

#hover #transform #border

Canlı incele Hover

Flip Card

Card flips in 3D to reveal its back face on hover.

#gradient #hover #3d

Canlı incele Hover

Fold Corner

Corner folds over on hover.

Canlı incele Hover

Arrow Corner Frame

Arrow-shaped accents point inward at each corner on hover.

#hover #transform #border

Canlı incele Hover

Fast Corner Trace

Single corner accent traces all four corners quickly on hover.

#hover #animation #transform

Canlı incele Hover

Cyber Corner Frame

Cyberpunk-style corner brackets with glow trace on hover.

#hover #transform #shadow

Canlı incele Hover

Glitch Corner Frame

Corners glitch and shift on hover.

#hover #animation #transform

Canlı incele Hover

Magnetic Pull Frame

Frame magnetically follows the cursor on hover.

#hover #transform #shadow

Canlı incele Hover

Metallic Sheen Frame

Metallic gradient sheen sweeps the frame on hover.

#hover #animation #gradient

Canlı incele Hover

Sticker Lift Frame

Sticker-style frame lifts and peels on hover.

#hover #transform #border

Canlı incele Hover

VHS Trace Frame

VHS tracking distortion lines trace the border on hover.

#hover #animation #gradient

Canlı incele Hover

Halo Ring

A glowing halo ring expands on hover.

#hover #transform #shadow

Canlı incele Hover

Zoom Frame Thumbnail

The artwork scales up inside a fixed frame while an inset border draws itself in.

#hover #gradient #transform

Canlı incele Hover

Magnetic Button

Button translates toward the cursor for a magnetic pull feel.

#gradient #hover #shadow

Canlı incele Hover

Mosaic Tile Flip

A 3x3 grid of small tiles flips in 3D in a staggered wave on hover.

#gradient #hover #3d

Canlı incele Hover

Pixel Grid Light

A fine grid of pixel dots lights up across the panel on hover.

#gradient #hover #shadow

Canlı incele Hover

Reflection Glass

Frosted glass reflection on hover.

#hover #gradient #transform

Canlı incele Hover

Rotate 3D Crate

Crate lid swings open on hover.

#hover #transform #border

Canlı incele Hover

Stars Burst

Tiny stars burst outward on hover.

#hover #animation #transform

Canlı incele Hover

Vanish

Content vanishes into a blur haze while a smoke cloud puffs outward on hover.

#gradient #hover #border

Canlı incele Yükleyiciler

Antenna Signal

Antenna with signal waves.

#animation #transform #border

Canlı incele Yükleyiciler

Barometer

Barometer dial with needle.

#animation #gradient #transform

Canlı incele Yükleyiciler

Chainsaw

Chainsaw chain speeding around the guide bar.

#animation #gradient #border

Canlı incele Yükleyiciler

Dart Throw Flight

Dart flying toward board.

#animation #gradient #transform

Canlı incele Yükleyiciler

Deflector Shield

Deflector shield bubble pulsing around ship.

#animation #gradient #transform

Canlı incele Yükleyiciler

Drum Stick

Drum stick bouncing on a snare drum head.

#animation #gradient #transform

Canlı incele Yükleyiciler

Fax Feed

Paper scrolling through a fax machine slot.

#animation #gradient #transform

Canlı incele Yükleyiciler

Floppy Disk

Floppy diskette sliding in and out of a drive slot.

#animation #gradient #border

Canlı incele Yükleyiciler

Force Field

Force field hexagon pattern glowing.

#animation #gradient #transform

Canlı incele Yükleyiciler

Gauge Needle

Gauge needle bouncing.

#animation #gradient #transform

Canlı incele Yükleyiciler

Gradient Ring

A smooth gradient ring spinner with a fading tail, iOS-style.

#gradient #animation #border

Canlı incele Yükleyiciler

Hygrometer

Hygrometer showing humidity level.

#animation #gradient #transform

Canlı incele Yükleyiciler

Lava Lamp

Orange blobs rising and morphing inside a warm yellow lava lamp.

#gradient #animation #shadow

Canlı incele Yükleyiciler

Pretzel Twist

Pretzel with twisting arms.

#animation #transform #border

Canlı incele Yükleyiciler

Prevailing Wind

Prevailing wind direction arrows.

#animation #border

Canlı incele Yükleyiciler

Satellite Dish

Satellite dish emitting signal waves.

#animation #gradient #transform

Canlı incele Yükleyiciler

Sextant

Sextant arc with swinging arm.

#animation #transform #border

Canlı incele Yükleyiciler

Tape Measure

Tape measure extending and retracting its yellow ribbon.

#animation #gradient #border

Canlı incele Yükleyiciler

Track Lane

Runner sprinting around an athletics track oval.

#animation #gradient #shadow

Canlı incele Yükleyiciler

Trampoline Bounce

A pink ball bouncing on a cyan trampoline surface that flexes on impact.

#gradient #animation #shadow

Canlı incele Yükleyiciler

Triangle Stack

Nested triangles rotating opposite.

#animation #transform #border

Canlı incele Yükleyiciler

Vortex Spiral

Four nested purple rings spiraling inward and fading to nothing.

#animation #border #transform

Canlı incele Navigasyon

Circle Hamburger

Hamburger inside a circle that morphs on hover.

#hover #transform #border

Canlı incele Navigasyon

Flip Hamburger

Hamburger that flips on Y axis.

#hover #transform #border

Canlı incele Navigasyon

Spin Hamburger

Hamburger that spins 180 degrees on hover.

#hover #transform #border

Canlı incele Navigasyon

To Close Hamburger

Hamburger that becomes an X close icon on hover.

#hover #transform #border

Canlı incele Navigasyon

To Minus Hamburger

Hamburger that becomes a minus line on hover.

#hover #transform #border

Canlı incele Navigasyon

To Plus Hamburger

Hamburger that becomes a plus sign on hover.

#hover #transform #border

Canlı incele Navigasyon

Fuzzy Match Palette

Command palette that highlights matched letters in the query string.

Canlı incele Navigasyon

Chevron Outline Breadcrumbs

Breadcrumbs with outlined chevron shapes.

Canlı incele Navigasyon

Dashed Trail Breadcrumbs

Breadcrumbs with dashed connecting lines.

#hover #transform #border

Canlı incele Navigasyon

Neon Separator Breadcrumbs

Dark mode breadcrumbs with neon separators.

#hover #transform #shadow

Canlı incele Navigasyon

Triangle Tip Breadcrumbs

Breadcrumbs with triangle pointed tips.

#hover #gradient #transform

Canlı incele Navigasyon

Dark Minimal Navbar

Minimal dark navbar with subtle hover underlines.

#hover #transform #border

Canlı incele Navigasyon

Fixed Edge Drawer Navbar

Drawer fixed to the viewport edge with a sharp vertical layout.

#hover #transform #border

Canlı incele Navigasyon

Glass Panel Drawer Navbar

Drawer with frosted glass panel styling over a colored background.

#hover #shadow #border

Canlı incele Navigasyon

Gradient Panel Drawer Navbar

Drawer with a gradient panel background and active indicator.

#hover #gradient #border

Canlı incele Navigasyon

Light Panel Drawer Navbar

Light panel drawer with clean card-style spacing.

#hover #shadow #border

Canlı incele Navigasyon

Push Content Left Drawer Navbar

Left drawer pushes the main content rightward when opening.

#hover #animation #border

Canlı incele Navigasyon

Push Content Right Drawer Navbar

Right drawer pushes the main content leftward when opening.

#hover #animation #border

Canlı incele Navigasyon

Rounded Pill Drawer Navbar

Drawer with rounded pill-style links and soft pink palette.