22 CSS Button Group Designs
Advertisement
A CSS button group is a row of related buttons that act as a single visual unit. These 22 hand-coded designs are ready-to-ship segmented controls, split buttons, pagination strips, toolbars, and toggle bars you can drop into a project today — copy the markup, wire your handlers, and ship.
01 / 22
Liquid Mercury
Pure CSS 
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.
02 / 22
Subgrid Beam
Pure CSS 
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.
03 / 22
Acid Tags
Pure CSS 
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.
04 / 22
Quantum Split
Pure CSS 
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.
05 / 22
Cellular Toggle
Pure CSS 
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.
06 / 22
Pixel Matrix
Pure CSS 
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.
07 / 22
Gradient Flow
Pure CSS 
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.
08 / 22
Holographic Dial
Pure CSS 
Icon segmented control where the active icon is filled with a moving conic-gradient holographic sheen. Hover shifts the gradient phase before commit.
09 / 22
Stack Tower
Pure CSS 
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.
10 / 22
Orbital FAB
Pure CSS 
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.
11 / 22
Glitch Grid
Pure CSS 
Filter buttons where the active state ghosts a cyan/magenta RGB-split clone of itself, vibrating subtly on hover. Brutalist meets cyberpunk.
12 / 22
Plasma Pill
Pure CSS 
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.
13 / 22
Pulse Reactor
Pure CSS 
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.
14 / 22
Solar Flare
Pure CSS 
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.
15 / 22
Bio-Decision
Pure CSS 
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.
16 / 22
Ferro Toolbar
Pure CSS 
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.
17 / 22
Magnetic Disc
Pure CSS 
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.
18 / 22
Plasma Combo
Light JS 
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.
19 / 22
Kinetic Trio
Light JS 
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.
20 / 22
Synthwave Dial
Light JS 
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.
21 / 22
Wormhole Tabs
Pure CSS 
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.
Advertisement
Build your own
Tweak the exact look in our visual generators — no signup, instant copy-paste.
FAQ
Frequently asked questions
What is a CSS button group?
A button group is a set of related buttons rendered together as a single visual unit — toolbars, segmented controls, pagination, split-action buttons, stepper wizards and toggle bars are all button groups. The pattern signals to users that the buttons share a context or are mutually exclusive.
When should I use a button group instead of separate buttons?
Use a group when the buttons share an axis of meaning — same data target, mutually exclusive states (radio-style), multi-select toggles (bold/italic/underline), or sequential actions like pagination. Use separate buttons when the actions are unrelated or have different priorities.
Are these CSS button groups accessible?
Yes. Each demo uses real interactive elements — button, input radio, input checkbox, details/summary — with appropriate ARIA (aria-current, aria-pressed, aria-expanded, aria-label) and visible focus states. They work with keyboard, mouse, and screen readers out of the box.
Do button groups work without JavaScript?
Most do. Of the 22 patterns, 17 are pure CSS using :checked, :hover, :focus-within and :has() to drive state. Only the dropdown combo, number stepper, copy-flash and a couple of others include small self-contained JS snippets.
Can I use these button groups in React, Vue, or Astro?
Yes. Every demo is plain HTML and CSS (with optional vanilla JS) and has no dependencies. Drop the markup into any framework — React JSX, Vue templates, Astro components, plain HTML — and the styles work as-is. MIT licensed.
Related collections
43 CSS Button Designs
43
43 hand-coded CSS buttons — real-world materials like brushed brass and vinyl, interactive use-case buttons (add-to-cart, download, like, delete), and click-effect studies: magnetic mercury ripple, brutalist glitch, neon plasma burst, clay press, ink spread, and particle shards.
buttons hover animation
Responsive
20 CSS Cards with Animations
20
20 hand-crafted CSS card components — aurora glow, 3D tilt, glassmorphism, neon borders, flip card, pricing, terminal, music player, weather widget and more.
cards components animation
Responsive
23 CSS Checkboxes
23
23 hand-crafted CSS checkboxes — toggles, glow, draw stroke, bouncy pop, glassmorphism, neumorphic, liquid fill, ripple, confetti and more. Mostly pure CSS, copy-paste ready.
checkboxes forms animation
Responsive