22 CSS Button Group Designs

segmented control components css-only

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.

22 unique groups 19 Pure CSS 3 CSS + JS 100% copy-paste ready Published May 4, 2026

01 / 22

Liquid Mercury

Pure CSS

Three options on a viscous mercury rail.

Live Demo Try it

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.

Live Demo Try it

03 / 22

Acid Tags

Pure CSS

Multi-select chips with an acid-green glow halo that radiates outward when checked.

Live Demo Try it

04 / 22

Quantum Split

Pure CSS

Primary action with a sibling menu that opens via native details/summary.

Live Demo Try it

05 / 22

Cellular Toggle

Pure CSS

Format toggles where checking a cell fills it with a swirling conic gradient anchored to its center.

Live Demo Try it

06 / 22

Pixel Matrix

Pure CSS

Pagination styled as a tiny LED matrix display.

Live Demo Try it

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.

Live Demo Try it

08 / 22

Holographic Dial

Pure CSS

Icon segmented control where the active icon is filled with a moving conic-gradient holographic sheen.

Live Demo Try it

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.

Live Demo Try it

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.

Live Demo Try it

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.

Live Demo Try it

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.

Live Demo Try it

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.

Live Demo Try it

14 / 22

Solar Flare

Pure CSS

Date-range presets where a warm solar glow follows your cursor across the bar.

Live Demo Try it

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.

Live Demo Try it

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.

Live Demo Try it

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.

Live Demo Try it

18 / 22

Plasma Combo

Light JS

A dropdown trigger with a neon plasma border that pulses subtly.

Live Demo Try it

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.

Live Demo Try it

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.

Live Demo Try it

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.

Live Demo Try it

22 / 22

Aurora Dust

Pure CSS

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.

Live Demo Try it

Build your own

Tweak the exact look in our visual generators — no signup, instant copy-paste.

Generator

CSS Flexbox Generator

Lay out the segmented group with even gaps.

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 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

27 CSS Calendar Designs

27 hand-coded CSS calendar designs covering every search intent for 'css calendar' — pure-CSS calendar (no JavaScript), CSS Grid layouts, glassmorphism widgets, brutalist designs, dark mode UIs, neumorphic cards, horizontal timelines, sidebar widgets, booking date-range pickers, CSS Grid advent calendars, Fluent / Material Design, circular / radial layouts, retro neon cyberpunk, 3D flip cards, isometric dashboards, split-screen heroes, liquid micro-interactions, bento grid booking, vintage paper tear-offs, vertical timelines, kinetic typography, and slanted diagonal grids. 1 truly pure-CSS, 26 with small vanilla JS snippets for event handling. Scoped class names that never collide, prefers-reduced-motion respected, MIT-licensed.

css calendar css calendar design css calendar widget Responsive

20 CSS Cards with Animations

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