Playground

Playground · 22 demos

CSS Button Groups Playground

Pick any demo to open it in a live, side-by-side editor. Tweak the HTML, CSS or JS and see your changes render instantly. Reset any time to return to the original.

Or browse the full CSS Button Groups collection for the gallery view with code panels.

Three options on a viscous mercury rail. The thumb morphs its border-radius asymmetrically as it slides — the kind of animation curve a human would never hand-author.

Three actions on a single subgrid track with a luminous beam underline that physically moves between buttons on hover, drawn with a single shared pseudo-element.

Multi-select chips with an acid-green glow halo that radiates outward when checked. Each chip carries a unique pulse phase so the row feels alive without being noisy.

Primary action with a sibling menu that opens via native details/summary. The split chevron rotates 180° and the menu materialises with a clip-path reveal — no JS.

Cellular Toggle

Format toggles where checking a cell fills it with a swirling conic gradient anchored to its center. Hover prefills the conic with a faint preview.

Pagination styled as a tiny LED matrix display. Each page is a "pixel cluster"; the active page lights up like a real 7-segment with phosphor glow.

Multi-step wizard where the "done" line is a flowing gradient (not a static fill) — the light visibly travels through the completed segments toward the current step.

Holographic Dial

Icon segmented control where the active icon is filled with a moving conic-gradient holographic sheen. Hover shifts the gradient phase before commit.

Vertical action column where each row pushes 8px deeper on hover, and the whole stack rotates 1° in 3D. SVG icons recolor with a gradient stroke.

A FAB that fans out three satellite buttons on click — but they arc into position along a curved path, not a straight line. The main button rotates and pulses an outer ring.

Filter buttons where the active state ghosts a cyan/magenta RGB-split clone of itself, vibrating subtly on hover. Brutalist meets cyberpunk.

A glassmorphic pill that always carries a slowly rotating conic plasma loop behind it via @property — the kind of motion that feels alive without being noisy.

A radar-style action bar — clicking any button activates it AND emits a circular shockwave that ripples outward across the whole bar. Active button stays lit.

Date-range presets where a warm solar glow follows your cursor across the bar. Active range gets a permanent flare; the moving glow is pure CSS via --mx custom prop.

A two-button row where each button has a different "voice": reject shakes when hovered (negative pull), approve emits a particle burst on click via a single mask-image pseudo-element.

Icon toolbar where icons subtly tilt toward your cursor as you sweep across — pure CSS, driven by --mx via inline style on the parent. No JS required.

Three pricing tiers as a slowly rotating disc — each disc carries a tier; hover slows the rotation and lifts the front disc, click snaps it forward.

A dropdown trigger with a neon plasma border that pulses subtly. The list reveals via a clip-path slide; selection plays a scanline flash on the chosen option.

Three icon actions where the active button morphs into a confirmation pill, expands in width, and plays a gradient flow before snapping back. Layout shift handled with CSS grid auto-flow.

Quantity stepper as a synthwave-grid dial — chrome +/− buttons with a scanline window that morphs to magenta when the count hits max, cyan when it hits min.

Tab nav where the active indicator stretches into a trailing wormhole as it moves between tabs — implemented via :has() and a single shared pseudo-element with smooth width interpolation.

Three premium tier buttons floating on a particle-aurora field — drifting blobs of cyan / magenta / gold via animated background-positions, layered noise, and a subtle hover-lift.