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 İpuçları

Status Offline

Offline status tooltip with grey dot above the trigger.

#hover #transform #border

Canlı incele İpuçları

Status Online

Online status tooltip with green dot above the trigger.

#hover #transform #shadow

Canlı incele İpuçları

Status Pill

Pill-shaped status tooltip above the trigger.

#hover #transform #shadow

Canlı incele İpuçları

Sticker Peel

Tooltip that peels up like a sticker above the trigger.

#hover #transform #shadow

Canlı incele İpuçları

Stock Status

Stock availability status tooltip above the trigger.

#hover #transform #border

Canlı incele İpuçları

Stretch X

Tooltip stretches horizontally into view above the trigger.

#hover #transform #border

Canlı incele İpuçları

Stretch Y

Tooltip stretches vertically into view above the trigger.

#hover #transform #border

Canlı incele İpuçları

Sunset Blaze

Vibrant sunset-blaze gradient tooltip.

#hover #gradient #transform

Canlı incele İpuçları

Swing Top

Tooltip swings in like a pendulum above the trigger.

#hover #transform #border

Canlı incele İpuçları

Tada Success

Success tooltip celebrates with a tada animation above the trigger.

#hover #animation #transform

Canlı incele İpuçları

Tick Marks Bottom

Tooltip with tick-mark decorations along its bottom edge.

#hover #gradient #transform

Canlı incele İpuçları

Time Stamp

Timestamp tooltip above the trigger.

#hover #transform #border

Canlı incele İpuçları

Valentine Heart

Romantic pink valentine heart tooltip.

#hover #gradient #transform

Canlı incele İpuçları

Zig Zag

Tooltip that zigzags into view above the trigger.

#hover #animation #transform

Canlı incele İpuçları

Zoom In Right

Tooltip zooms in from small to full size on the right.

#hover #transform #border

Canlı incele İpuçları

Zoom Out Right

Tooltip zooms out from oversized to normal on the right.

#hover #transform #border

Canlı incele İpuçları

Zoom Out Top

Tooltip zooms from tiny to full size above the trigger.

#hover #transform #border

Canlı incele Zaman Çizelgeleri

Flange Merge Timeline

A side branch flanges out of the trunk and curves straight back into the next release.

#border #shadow #branching

Canlı incele Zaman Çizelgeleri

Marble Metro Timeline

A thick marble line threads three station rings the way a subway route map does.

#layout #gradient #border

Canlı incele Zaman Çizelgeleri

Wander Stamp Timeline

A travel journal where every stop carries a perforated postage stamp that tilts on hover.

#border #hover #transform

Canlı incele Anahtarlar

Open / Closed Door

Wooden door swings open on a hinge with a 3D perspective rotation.

#gradient #3d #border

Canlı incele Anahtarlar

Emoji Mood Toggle

Sad face morphs into a happy face as the knob slides across the track.

#gradient #shadow #border

Canlı incele Anahtarlar

Eye Open / Closed

An eyelid slides down to close the eye when toggled off, with pupil shift.

#gradient #border #transform

Canlı incele Anahtarlar

Glass / Metal

Frosted glass knob turns to a brushed metal finish.

#gradient #transform #border

Canlı incele Anahtarlar

Halo Ring

A radiant ring expands around the knob as it lights up the track.

#gradient #transform #shadow

Canlı incele Anahtarlar

Has-Selector Settings Toggle

Switching on expands an extra options panel below it, using :has() and grid rows.

#transform #border #has-selector

Canlı incele Anahtarlar

Vintage Lever Pull

Retro industrial lever that pulls down to engage with a metallic finish.

#gradient #shadow #border

Canlı incele Anahtarlar

Microphone Live

Microphone glows red and emits pulsing sound waves when live.

#animation #border #transform

Canlı incele Anahtarlar

Minimal Line Toggle

Ultra-minimal outline toggle where only the knob border and track line shift.

#border #transform #switch

Canlı incele Anahtarlar

Play / Pause Button

Circular media button morphs a play triangle into two pause bars.

#border #switch

Canlı incele Anahtarlar

Retro Rocker Switch

Vintage panel rocker switch that tilts diagonally between ON and OFF positions.

#gradient #shadow #border

Canlı incele Anahtarlar

Roll / Halt

Wheel knob spins while rolling and stops dead when halted.

#animation #gradient #transform

Canlı incele Anahtarlar

Shield Up

Energy shield activates with a protective glow barrier.

#gradient #transform #shadow

Canlı incele Anahtarlar

Smooth iOS Slide

Classic iOS-style toggle with a smooth knob slide and color fade.

#shadow #border #transform

Canlı incele Anahtarlar

Squish Knob Toggle

The knob flattens against the track mid-travel and rounds out again on arrival.

#animation #transform #border

Canlı incele Anahtarlar

Sun / Moon Sky Slide

Orb crosses a gradient sky from blue day to indigo night, swapping its glow.

#gradient #shadow #border

Canlı incele Anahtarlar

Traffic Light Toggle

A horizontal traffic light slider where the knob moves from red stop to green go.

#gradient #shadow #border

Canlı incele Akordeonlar

Amber Edge Accordion

A resin coloured rail down the left edge stretches to full height when open.

#checkbox #transform #max-height

Canlı incele Akordeonlar

Brass Ledger Accordion

Numbered ledger rows where the brass index chip fills as the note unrolls.

#checkbox #max-height #transition

Canlı incele Akordeonlar

Canyon Tree Accordion

A file tree feel where nested folders indent behind their own guide lines.

#details #nested #monospace

Canlı incele Akordeonlar

Garnet Steps Accordion

Numbered steps joined by a connector line, with only one step expanded.

#radio #steps #border

Canlı incele Akordeonlar

Harbor Plans Accordion

Priced plan rows compare at a glance and unfold their feature list on pick.

#radio #pricing #max-height

Canlı incele Akordeonlar

Jade Nested Accordion

A group folds open to reveal smaller accordions nested one level deeper.

#details #nested #animation

Canlı incele Akordeonlar

Oasis Legend Accordion

Colour coded category groups where the open group borrows its own hue.

#checkbox #legend #max-height

Canlı incele Akordeonlar

Slate Stack Accordion

A radio group keeps one slab open and the body grows with grid template rows.

#radio #grid #transition

Canlı incele Akordeonlar

Summit Thick Accordion

The open section thickens its outline while the padding shrinks to absorb it.

#checkbox #border #transition

Canlı incele Akordeonlar

Tundra Quote Accordion

Every row folds out a bordered pull quote with its source line underneath.

#details #blockquote #animation

Canlı incele Uyarılar

Tundra Frame Alert

A one pixel gradient frame circles the card while its colours rotate around the edge.

#gradient #frame #border

Canlı incele Avatarlar

Frost Double Ring Avatar

Two concentric rings hold the initials and the outer halo widens on hover.

#border #shadow #hover

Canlı incele Avatarlar

Tide Thin Thick Ring Swap

A hairline ring and a heavy ring trade their weights when the avatar is hovered.

#ring #border #hover

Canlı incele Rozetler

Epic Badge

Epic achievement badge with purple gradient.

#gradient #transform #shadow

Canlı incele Rozetler

Honor Badge

Badge of honor with deep purple and gold trim.

#transform #shadow #border

Canlı incele Rozetler

Mastery Badge

Mastery achievement badge with elite styling.

#transform #shadow #border

Canlı incele Rozetler

Milestone Badge

Milestone achievement badge with celebratory styling.

#gradient #shadow #border

Canlı incele Rozetler

Rare Badge

Rare achievement badge with blue gradient.

#gradient #transform #shadow

Canlı incele Rozetler

Star Achievement

Star achievement badge for completion recognition.

#shadow #border

Canlı incele Rozetler

Action Archive Badge

Archive action badge with box glyph and amber tone.

#gradient #shadow #border

Canlı incele Rozetler

Action Delete Badge

Delete action badge with red destructive styling.

#gradient #shadow #border

Canlı incele Rozetler

Action Download Badge

Download action badge with down-arrow glyph and indigo tone.

#gradient #shadow #border

Canlı incele Rozetler

Action Email Badge

Email action badge with envelope glyph and rose tone.

#gradient #shadow #border

Canlı incele Rozetler

Action Print Badge

Print action badge with printer glyph and zinc tone.

#gradient #shadow #border

Canlı incele Rozetler

Action Save Badge

Save action badge with floppy-disk glyph and green tone.

#gradient #shadow #border

Canlı incele Rozetler

Action Upload Badge

Upload action badge with up-arrow glyph and sky-blue tone.

#gradient #shadow #border

Canlı incele Rozetler

Critical Alert Badge

Critical alert badge with pulsing red animation.

#animation #transform #shadow

Canlı incele Rozetler

Danger Alert Badge

Critical danger alert badge with strong red.

#transform #shadow #border

Canlı incele Rozetler

Error Alert Badge

Red error alert badge with warning style.

#shadow #border

Canlı incele Rozetler

Info Alert Badge

Blue info alert badge for general notifications.

#shadow #border

Canlı incele Rozetler

Notice Badge

Neutral notice badge in slate color.

Canlı incele Rozetler

Warning Alert Badge

Yellow warning alert badge.

#shadow #border

Canlı incele Rozetler

Glitch Badge

Badge with cyberpunk glitch effect.

#animation #transform #shadow

Canlı incele Rozetler

Double Ring Pulse Badge

Badge with two expanding ring pulses staggered.

#animation #transform #border

Canlı incele Rozetler

Pulse Ring Badge

Badge with expanding ring pulses around it.

#animation #transform #border

Canlı incele Rozetler

Typewriter Badge

Badge with text appearing like a typewriter.

#animation #border

Canlı incele Rozetler

Typing Dots Badge

Badge with three typing indicator dots.

#animation #transform #border

Canlı incele Rozetler

Three Dots Loading Badge

Badge with three pulsing loading dots.

#animation #transform #border

Canlı incele Rozetler

Arctic Aurora Badge

Aurora-borealis gradient badge with shifting green-violet haze.

#animation #gradient #shadow

Canlı incele Rozetler

Arctic Snow Badge

Snowy white badge with subtle flake speckles.

#gradient #shadow #border

Canlı incele Rozetler

Art Deco Badge

Art deco badge with gold geometric pattern.

#gradient #transform #border

Canlı incele Rozetler

Beta Dot Badge

Subtle beta badge with a small status dot indicator.

#animation #border

Canlı incele Rozetler

Bronze Metallic Badge

Bronze metallic badge with warm copper gradient.

#gradient #shadow #border

Canlı incele Rozetler

Brutalist Black Badge

Brutalist badge with sharp edges and offset shadow.

#transform #shadow #border

Canlı incele Rozetler

Double Brutalist Badge

Brutalist badge with double offset shadows.

#transform #shadow #border

Canlı incele Rozetler

Brutalist Green Badge

Brutalist green badge with bold offset shadow.

#transform #shadow #border

Canlı incele Rozetler

Brutalist Orange Badge

Brutalist orange badge with stark black border.

#transform #shadow #border

Canlı incele Rozetler

Brutalist Outline Badge

Brutalist badge with transparent body and thick outline.

#transform #shadow #border

Canlı incele Rozetler

Brutalist Pink Badge

Brutalist pink badge with offset shadow.

#transform #shadow #border

Canlı incele Rozetler

Brutalist Yellow Badge

Brutalist yellow badge with thick border and offset shadow.

#transform #shadow #border

Canlı incele Rozetler

Candy Cupcake Badge

Cupcake badge with frosting-pink swirl and gold sprinkles.

#gradient #shadow #border

Canlı incele Rozetler

Candy Gummy Badge

Translucent gummy bear-style badge with jelly glow.

#shadow #border #filter

Canlı incele Rozetler

Candy Lollipop Badge

Lollipop badge with spiral swirl pattern.

#gradient #shadow #border

Canlı incele Rozetler

Candy Marshmallow Badge

Puffy white marshmallow badge with soft shadow.

#gradient #shadow #border

Canlı incele Rozetler

Cave Crystal Badge

Faceted crystal badge with diamond-cut shimmer.

#gradient #shadow #border

Canlı incele Rozetler

Cloud AWS Badge

AWS cloud badge with orange-to-dark gradient and Squidward.

#gradient #shadow #border

Canlı incele Rozetler

Cloud Azure Badge

Microsoft Azure badge with blue A-triangle styling.

#gradient #shadow #border

Canlı incele Rozetler

Cloud Cloudflare Badge

Cloudflare cloud badge with orange-flame styling.

#gradient #shadow #border