Button Group

Quick implementation

.btn-group {
  display: inline-flex;
  border: 1px solid oklch(0.85 0 0);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
}

.btn-group .btn {
  border-radius: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: var(--text);
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  transition: background 0.2s ease;
  position: relative;
}

/* Collapse borders using negative margin */
.btn-group .btn:not(:first-child) {
  margin-left: -1px;
}

/* Round corners */
.btn-group .btn:first-child {
  border-radius: 0;
}

.btn-group .btn:last-child {
  border-radius: 0;
}

/* Hover state */
.btn-group .btn:hover {
  background: oklch(0.95 0 0);
  z-index: 1;
}

/* Active/Selected state */
.btn-group .btn.is-active {
  background: oklch(0.9 0 0);
  color: oklch(0.2 0 0);
  font-weight: 700;
}

/* Focus visible for accessibility */
.btn-group .btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  z-index: 2;
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

Act as a CSS expert. Create a "Button Group" component.

Requirements:
1. Use flexbox to align buttons horizontally.
2. Remove border-radius from all buttons except the first and last child.
3. Use negative margin on inner buttons to collapse double borders.
4. Ensure the group has a unified border.
5. Add an `.is-active` state for the selected button.

Provide two variants:
1. Standard: Solid background for active state.
2. Outline: Border-only background for active state.

Handle edge cases:
- Ensure focus-visible outlines are visible over the collapsed borders.
- Ensure the group is responsive on mobile (stack vertically if needed).

Why this matters in 2026

Button groups create visual cohesion for related actions, reducing cognitive load by grouping controls. They are essential for toolbars and pagination where space is limited and clarity is paramount.

The logic

We use flexbox to align items and negative margins to collapse the double borders that appear when buttons touch. Border-radius is stripped from inner buttons to maintain a single, unified shape.

Accessibility & performance

This pattern uses zero JavaScript, ensuring instant interaction and full keyboard navigation support. It relies on standard focus states to indicate the active button within the group.