CSS Buttons Playground

A real e-commerce state machine: click fills a green progress bar along the bottom edge, snaps to a success state with a particle burst, then auto-resets after two seconds.

The button body itself fills left-to-right like a true progress indicator while the arrow bounces, then morphs into a "Complete" state with a checkmark.

A toggle that bursts seven floating heart particles upward on activation; the count ticks up or down with a sliding number animation.

A two-step destructive pattern: the first click shakes the button and slides up a red confirmation panel; a second click within three seconds wipes it with a sweep into a "Deleted" ghost state.

A media control whose icon morphs between a triangle and pause bars; a pulsing halo ring appears while playing and a row of waveform bars dances with staggered timing.

The border fills upward with a purple gradient, the label swaps to a checkmark, then twenty-four confetti pieces in six colors burst outward in a celebratory fan.

A liquid-metal pill with a polished radial sheen. Click anywhere on the surface and a bright ripple expands from the exact point of contact, like mercury catching the light.

A raw outlined button that fills hard on hover. Click triggers a chromatic-aberration glitch — the label tears into red and cyan layers with a violent shake before snapping back.

A cyberpunk terminal button glowing faint cyan. Click detonates a plasma burst — an expanding ring, a radial bloom, and ten sparks flung from the point of contact.

A chunky claymorphism button with a thick 3D base shadow. Press it and the whole shape squishes down and stretches wide, with a soft white bloom blossoming from the click point.

A serif, italic button with a thin frame and a hairline underline that draws in on hover. Press and hold and ink floods the button from your finger; release and it retreats.

A warm, dark editorial button. Click and eighteen triangular shards explode outward in a full circle — each a random size, colour, and spin — like struck flint throwing sparks.

Letterpress brass plate with engraved label and steel rivets at the corners. Hover deepens the bevel; click presses the plate into the surface.

Washi paper with a hand-stamped red ink seal in the corner. The bottom-right corner is folded like an origami crease; hover lifts the whole card like a postcard.

Glacier blue with backdrop-filter refraction and noisy frost grain on top. Hover melts the surface to a brighter, glossier ice.

Concave ivory keycap with black ring and serif letter. Click depresses the key 4px with a soft mechanical thud shadow.

Walnut grain block with brass corner brackets and gilt label. Hover deepens the lacquer sheen; the brass catches a tilt of light.

Pill-shaped pharma capsule split half clinical-blue, half pearl-white, with a chunky black band carrying the dose label. Hover brightens both halves.

Aged copper disc with verdigris patina blooming around the rim. Hover spins the patina conically.

Triangular fold of cream paper with a single ink-red strip. Hover unfolds slightly to reveal the fortune underneath.

Iridescent cyan→magenta sheen with a ragged sticker edge. Hover shifts the spectrum across the surface.

Rough concrete with a safety-yellow stripe and hard 6px offset. Click slams the slab to flush with the page.

Quicksilver bead that morphs its border-radius on hover, like surface tension giving way under pressure.

The Linear / Raycast / Vercel button trend of 2026 — soft gradient pill with a crisp inset highlight, ambient glow, and a tiny shortcut chip on the right. Hover brightens the glow without moving the button.

Kraft masking tape with torn perforated edges and a hand-stamped ink label. Hover lifts the corner like a peel.

Obsidian shard with a faceted clip-path; magenta and cyan refract through the cuts on hover.

Wine-velvet pill with gilt edges; the nap shimmers like brushed fabric on hover.

Phosphor-green 7-segment-style display on a pure black panel with a faint scanline overlay.

Hot-pink mixtape J-card with electric-teal corner sticker and ruled lines. Hover gives it a 90s cassette tilt.

Slate-green chalkboard with a chalk-drawn label and dusty grain. Hover smudges a faint eraser trail.

Sleeve-red record cover with concentric grooves; click drops the needle and ripples outward from the click point.

A genuine Polaroid frame — square sepia photo on top, the iconic chunky white bottom border with a handwritten caption and date stamp. Tilts casually on hover like it was just dropped on a table.

Airline-navy ticket with three-letter airport codes, a flight-path arrow, magenta tear-line stub, and a real barcode strip along the bottom.

Aged brass subway token with a curved arc sweep that traces a clock-like ring around the inscription on click. The arc is an SVG path so the curve stays smooth at every angle.

Cream pharmacy label with letterpress serif, dotted underline, and a red Rx badge. Vintage prescription chic.

Bakelite-cream dial with a brass pointer locked to OFF. Click toggles to ON: the pointer swings clockwise to the right tick mark and stays there until the next click.

Regal blue stamp with scalloped perforated edges and a faded ink date. Pure SVG-mask perforation.

Gold filigree foil seal over a maroon ribbon; ornate Victorian club-lounge energy.

Beige concave keycap with olive-green accent label; click flips the press shadow flush.

Enamel teal lever with chrome bolt; the cursor spotlight illuminates the metal as you move across.

Newsprint-cream receipt with a dashed perforation along the top, a tilted "PAID" rubber stamp watermark in the top-left corner, and a total that counts up on click before resetting.

Manila IBM-style punch card with the iconic clipped top-right corner, a stamped FORTRAN-style header at the top, and a real grid of column-and-row holes punched through the body. On hover the whole card follows the cursor magnetically.

Brass periscope rim around a glowing cyan lens with crosshair etching. Hover pulses the lens like a sub coming online.