CSS Buttons

Buttons communicate actions. Build a small, reusable system: base styles + variants (primary/secondary), sizes, icon support, disabled/loading, and groups—all with accessible focus states.

1) Primary & Secondary Buttons


.btnx{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
}
.btnx.primary   { background: #1E88E5; border-color: #1E88E5; color: #fff; }
.btnx.secondary { background: #6C757D; border-color: #6C757D; color: #fff; }
Download

2) Outline & Ghost Variants


.btnx.outline { background: transparent; color: #1E88E5; }
.btnx.ghost   { background: transparent; border-color: transparent; color: #1E88E5; }

3) Sizes & Block Buttons


.btnx.sm { padding: 6px 10px; font-size: 14px; }
.btnx.lg { padding: 12px 18px; font-size: 18px; }
.btnx.block { display: flex; width: 100%; }

4) Icon & Icon-Only Buttons


.btnx .fa { font-size: 14px; }
.icon-btn { width: 38px; height: 38px; border-radius: 50%; }

5) Disabled & Loading States


.btnx[disabled] { opacity: .55; cursor: not-allowed; }
/* loading: add a spinner element before label */

6) Button Groups (Segmented Control)


.btn-group { display: inline-flex; border: 1px solid #d0d7de; }
.btn-group .seg.active { background: #E3F2FD; }

Accessibility & Best Practices:

  • Use real <button> for actions; use <a> for navigation.
  • Keep focus visible: use :focus-visible, never remove outlines without a clear alternative.
  • Ensure color contrast (buttons ≥ 4.5:1 against the background for body text sizes).
  • Icon-only buttons need aria-label describing the action.
  • Support reduced motion (prefers-reduced-motion) for transitions.