# border CSS effects

Live preview Buttons

Arena Sand

Gladiator-style button with sandy texture.

Live preview Buttons

Banana Peel

Yellow banana peel with subtle curve.

Live preview Buttons

Bessemer Steel

Molten bessemer steel with hot edge.

Live preview Buttons

Bonsai Tree

Tiny bonsai with green crown on brown pot.

#hover #transform #shadow

Live preview Buttons

Bracket Wrap Button

Code-style button wrapped by animated square brackets.

Live preview Buttons

Brass Buckle

Polished brass belt buckle shape.

#animation #gradient #shadow

Live preview Buttons

Champagne Bubbles

Pale champagne with rising bubble streams.

Live preview Buttons

Equinox

Equinox button with a balanced day-night split.

Live preview Buttons

Nebula Cloud

Cosmic purple-pink nebula swirl.

Live preview Buttons

Ocean Tide

Waves rolling across a blue button face.

Live preview Buttons

Pelagic

Open-ocean pelagic button with deep blue vastness.

Live preview Buttons

Rafter

Rafter-button with diagonal roof beams.

Live preview Buttons

Smoke Drift

Translucent gray smoke drifting upward.

Live preview Buttons

Tundra Frost

Icy tundra grays with frost crystals.

Live preview Buttons

Vanilla Bean

Creamy vanilla with dark bean specks.

#animation #gradient #shadow

Live preview Buttons

Violet Storm

Deep violet button with lightning flicker.

Live preview Buttons

Void Black

Pure void-black button with a subtle violet rim.

#hover #shadow #border

Live preview Buttons

Wave Crest

Wave-crest button with a curling white foam top.

Live preview Buttons

Whetstone

Whetstone-button with a smooth sharpening surface.

Live preview Buttons

Yarrow

Pale yarrow-cluster button with tiny white dots.

Allergy Alert Card

Allergy alert card with warning banner and allergen list.

App Update Card

App update card with version, size, and update button.

Beer Flight Card

Beer flight card with sample glasses and ABV range.

Beer Pair Tips Card

Beer pairing tips card with beer style, dish pairing, and reasoning.

Booking Confirm Card

Booking confirmation card with reference and details.

Circuit Diagram Card

Circuit diagram card with battery, switch, and bulb.

Climb Pitch Card

Rock climbing pitch card with grade, length, and protection.

Cocktail Menu Card

Cocktail menu card with a glass illustration, ABV, and tasting notes.

Codex Lore Card

Codex lore card with an illuminated initial, parchment, and ornate border.

#gradient #transform #shadow

Coffee Passport

Coffee passport card with stamp grid, roast notes, and a bean icon.

Discount Coupon

Coupon card with scissors, a dashed cut line, notch cutouts and a big discount percentage.

Diet Plan Card

Daily diet plan card with meal slots and macros split.

Earthquake Card

Earthquake alert card with magnitude, depth, and epicenter.

Energy Type Card

Energy type card showing kinetic vs potential with formula.

Estimate Card

Service estimate card with breakdown and labor hours.

Moon Phase Card

Moon phase card with current phase, illumination, and cycle.

Pet Vaccination Card

Pet vaccination record with vaccine name, date, and next due.

Student ID

Student ID card with a portrait, university header, and a barcode strip.

Troll Card

Troll card with regeneration and claw attack.

#gradient #transform #shadow

Visa Stamp Card

Passport visa stamp card with an angled ink stamp and entry/exit details.

Vocabulary Word Card

Vocabulary word card with definition, pronunciation, and example.

Weather Today Card

Today's weather widget with temperature, condition, and high/low.

#gradient #transform #shadow

Live preview Checkboxes

3D Pyramid Check

A 3D pyramid that flips and turns gold when checked.

#transform #border #3d

Live preview Checkboxes

Amber Fossil Stone

A golden amber stone reveals an ancient inclusion when checked.

Live preview Checkboxes

Circle Stroke Draw

An SVG circle outline draws itself around a center dot that pops in when checked.

#border #transform #rotate

Live preview Checkboxes

Hourglass Checkbox

The glass rotates half a turn and the sand settles into the lower bulb.

#clip-path #transform #border

Live preview Checkboxes

Pulsar Radio Beams

Concentric radio waves pulse outward when this star is checked.

#animation #transform #shadow

Live preview Checkboxes

Ripple Burst Check

Toggling on triggers an expanding ripple ring around the checkbox.

#animation #border #transform

Live preview Checkboxes

Sparkle Twinkle

A four-pointed sparkle that twinkles in with a magenta glow and slow spin when checked.

#animation #shadow #border

Live preview Checkboxes

Tarot Card Reveal

A mystical tarot card flips to reveal its face when checked.

#gradient #transform #border

Live preview Checkboxes

Wifi Signal Toggle

An SVG wifi icon lights up in cyan with a soft glow when the device goes online.

#shadow #border #filter

Frosted Glass Input

Heavy frost effect with crystalline texture overlay.

#shadow #border #filter

Glassmorphism Input

Frosted glass input with backdrop blur and translucent border.

#shadow #border #filter

Neon Background Input

Dark input with neon glow background on focus.

3D Border Input

Skeuomorphic 3D raised border that depresses on focus.

Dashed Border Input

Input with a dashed border that solidifies on focus.

#animation #transform #border

Color Shift Floating Label

Label transitions through multiple hues when input is active.

iOS Style Floating Label

Clean iOS-style input with rounded corners and subtle floating label.

Letter Spacing Floating Label

Label expands its letter spacing as it lifts up.

#transform #border

Pill Floating Label

Rounded pill input whose label slides into a small floating chip.

Rotate Floating Label

Label rotates 90 degrees then settles above the input.

Scale Down Floating Label

Label shrinks to the corner with a smooth scale-down motion.

#transform #border

Both Icons Input

Input with icons on both left and right sides.

Circle Icon Input

Input with circular icon container on the left.

Flip Icon Input

Input whose icon flips 180 degrees on focus.

Invalid Icon Input

Input with a red X icon that appears when invalid.

Retro Terminal OTP

Old terminal-style OTP with green phosphor text.

Checkmark Radio

Radio that displays an animated checkmark inside the circle when picked.

#transform #border

Glass Search Bar

Frosted glass search bar with translucent background.

Minimal Slider

Ultra-minimal slider with thin track and small thumb.

Skeuomorphic 3D Input

Realistic 3D input with pressed-in appearance and bevels.

Success State Input

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

#hover #animation #gradient

Live preview Hover

Border Gradient Flow

Animated gradient border flows on hover.

Live preview Hover

Color Invert Pill

Pill swaps its background and text colors instantly on hover.

#hover #border #transform

Live preview Hover

Dashes Crawl Frame

Dashed border marches around the element on hover.

#hover #animation #border

Live preview Loaders

Baseball Pitch

Baseball stitching spinning as it flies past home plate.

Live preview Loaders

Blender Blade

Blender jar with whirring blades at the bottom.

Live preview Loaders

Fax Feed

Paper scrolling through a fax machine slot.

#animation #gradient #border

Live preview Loaders

Flash Flood

Flash flood water rising rapidly.

Live preview Loaders

Game Boy

Classic handheld Game Boy with a flickering screen.

#animation #transform #border

Live preview Loaders

Loop Roll

Loop shape rolling end over end.

Live preview Loaders

Microwave Turntable

Microwave glass plate rotating with a glowing interior.

Live preview Loaders

Pilgrim Hat

Pilgrim hat with shiny buckle.

Live preview Loaders

Satellite Dish

Satellite dish emitting signal waves.