Syllabus

On this page

CSS Buttons: Variants, States, Sizes and Accessible Button Design

Badar KhalilUpdated September 30, 2026 6 min read

What is a CSS button?

A CSS button is a clickable control styled with CSS so users can clearly see what it does and whether it is available. Buttons trigger actions such as submit, save, open a menu or delete. Good button design is one of the most important parts of a UI component library, because buttons appear on almost every page.

Focus keyword: CSS buttons. Related trending keywords: CSS button hover effects, accessible buttons, button focus-visible, color-mix() hover color, design tokens, CSS custom properties components, loading button CSS, icon button.

Use the right element: button vs link

<button>: performs an action on the current page (submit, toggle, open dialog). It is focusable and works with Enter and Space by default.
<a href>: navigates somewhere. Screen readers announce it as a link. You can style a link to look like a button, but keep the link semantics.
Never build a button from a <div> or <span>. You would have to recreate keyboard support, focus and roles yourself.
Inside a form, set type='button' for non-submit buttons, otherwise they submit the form by default.

Reset the browser defaults first

Buttons do not inherit fonts by default. A solid base rule is: font: inherit; cursor: pointer; border: 0; background: none; and then add your own padding, radius and colors. Add line-height and text-decoration: none when styling links as buttons.

Button variants

Primary: the main action on a page. Use only one per view.
Secondary: a less important action, often a lighter fill.
Outline: border only. Good for secondary choices.
Ghost or text: no border or fill until hover. Good for toolbars.
Danger: destructive actions like delete. Use red and a confirmation step.

Drive variants with CSS custom properties, for example --btn-bg and --btn-fg, so one base class supports many variants.

Sizes and touch targets

Offer small, medium and large sizes using padding and font size. For touch, aim for a target of at least 44 by 44 CSS pixels (WCAG 2.5.5 Level AAA) and never below 24 by 24 CSS pixels (WCAG 2.5.8 Level AA in WCAG 2.2). Use min-height and min-width instead of fixed sizes.

States every button needs

Default, hover (:hover), active (:active, pressed), focus (:focus-visible), disabled (:disabled) and loading.
Use :focus-visible to show a clear outline for keyboard users without showing it on every mouse click. Never remove the outline without a replacement that has enough contrast.
The native disabled attribute removes the button from tab order. If users need to discover why it is disabled, use aria-disabled='true' and block the action in JavaScript instead.
For loading, set aria-busy='true', keep the label, show a spinner and prevent double submits.

Modern CSS helpers

color-mix(in srgb, var(--btn-bg) 85%, black) creates hover and active shades from a single base color.
:where() keeps specificity low so variants are easy to override.
transition on background-color, transform and box-shadow gives smooth feedback. Respect prefers-reduced-motion.
:has() lets a button adapt when it contains an icon only, for example button:has(svg):not(:has(span)).

Icon buttons

A button with only an icon needs an accessible name, such as aria-label='Close' or visually hidden text. Mark decorative SVG icons with aria-hidden='true' and focusable='false'.

Button groups

Group related buttons with flex and a small gap. For a toggle button, use aria-pressed='true|false' and update it in JavaScript. For a group with one selected option, radio inputs styled as buttons are often better.

Best practices

Use action-oriented text: Save changes, Add to cart. Avoid Click here.
Keep color contrast at least 4.5:1 for text and 3:1 for the focus indicator and boundaries.
Do not rely on color alone to show state.
Keep consistent sizes, radius and spacing across the product.

Quick summary

Use semantic elements, a small set of variants built on custom properties, clear states, visible focus and accessible names. That makes CSS buttons reusable and inclusive.

Try it Yourself HTML

<style>
  .btn {
    --bg: #4f46e5; --fg: #fff; --bd: transparent;
    font: 600 15px system-ui, sans-serif;
    padding: 10px 20px; min-height: 44px;
    border-radius: 10px; border: 2px solid var(--bd);
    background: var(--bg); color: var(--fg);
    cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
    transition: background-color .2s, transform .2s, box-shadow .2s;
  }
  .btn:hover { background: color-mix(in srgb, var(--bg) 85%, black); }
  .btn:active { transform: scale(.97); }
  .btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }
  .btn.secondary { --bg: #e0e7ff; --fg: #312e81; }
  .btn.outline { --bg: transparent; --fg: #4f46e5; --bd: #4f46e5; }
  .btn.outline:hover { background: #eef2ff; }
  .btn.ghost { --bg: transparent; --fg: #4f46e5; }
  .btn.ghost:hover { background: #eef2ff; }
  .btn.danger { --bg: #dc2626; }
  .row { display: flex; flex-wrap: wrap; gap: 12px; padding: 24px; }
</style>
<div class='row'>
  <button class='btn'>Primary</button>
  <button class='btn secondary'>Secondary</button>
  <button class='btn outline'>Outline</button>
  <button class='btn ghost'>Ghost</button>
  <button class='btn danger'>Delete</button>
  <a class='btn' href='#'>Link button</a>
</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  .row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 24px; font-family: system-ui, sans-serif; }
  .btn { border: 0; border-radius: 8px; background: #0f766e; color: #fff; font: 600 inherit; cursor: pointer; }
  .sm { padding: 6px 12px; font-size: 13px; min-height: 32px; }
  .md { padding: 10px 18px; font-size: 15px; min-height: 44px; }
  .lg { padding: 14px 26px; font-size: 18px; min-height: 52px; }
  .btn:disabled { background: #cbd5e1; color: #64748b; cursor: not-allowed; }
  .btn[aria-disabled='true'] { opacity: .55; cursor: not-allowed; }
</style>
<div class='row'>
  <button class='btn sm'>Small</button>
  <button class='btn md'>Medium</button>
  <button class='btn lg'>Large</button>
  <button class='btn md' disabled>Disabled</button>
  <button class='btn md' aria-disabled='true' id='ad'>aria-disabled</button>
  <span id='msg' aria-live='polite'></span>
</div>
<script>
  document.getElementById('ad').addEventListener('click', function (e) {
    if (this.getAttribute('aria-disabled') === 'true') { e.preventDefault(); document.getElementById('msg').textContent = 'Fill in the required fields first.'; }
  });
</script>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: system-ui, sans-serif; padding: 24px; }
  .btn { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border: 0; border-radius: 10px; background: #4f46e5; color: #fff; font: 600 15px system-ui; cursor: pointer; }
  .btn .spin { display: none; width: 16px; height: 16px; border: 3px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
  .btn[aria-busy='true'] { opacity: .8; cursor: progress; }
  .btn[aria-busy='true'] .spin { display: inline-block; }
  @keyframes spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .btn .spin { animation-duration: 2s; } }
</style>
<button class='btn' id='save'><span class='spin' aria-hidden='true'></span><span id='label'>Save changes</span></button>
<script>
  var b = document.getElementById('save');
  b.addEventListener('click', function () {
    if (b.getAttribute('aria-busy') === 'true') return;
    b.setAttribute('aria-busy', 'true');
    document.getElementById('label').textContent = 'Saving...';
    setTimeout(function () { b.removeAttribute('aria-busy'); document.getElementById('label').textContent = 'Saved!'; }, 1800);
  });
</script>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  .row { display: flex; gap: 14px; padding: 24px; }
  .icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #f1f5f9; color: #0f172a; cursor: pointer; transition: background-color .2s, transform .2s; }
  .icon-btn:hover { background: #e2e8f0; transform: translateY(-2px); }
  .icon-btn:focus-visible { outline: 3px solid #4f46e5; outline-offset: 2px; }
  .icon-btn svg { width: 22px; height: 22px; }
</style>
<div class='row'>
  <button class='icon-btn' aria-label='Add to favorites'>
    <svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' aria-hidden='true' focusable='false'><path d='M12 21s-7-4.4-9.3-9C1.1 8.7 3 5 6.6 5c2 0 3.4 1 5.4 3 2-2 3.4-3 5.4-3C21 5 22.900 8.700 21.300 12 19 16.600 12 21 12 21z'/></svg>
  </button>
  <button class='icon-btn' aria-label='Close dialog'>
    <svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' aria-hidden='true' focusable='false'><path d='M6 6l12 12M18 6L6 18'/></svg>
  </button>
</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: system-ui, sans-serif; padding: 24px; }
  .group { display: inline-flex; border: 1px solid #cbd5e1; border-radius: 10px; overflow: hidden; }
  .group button { padding: 10px 18px; border: 0; background: #fff; font: 600 14px system-ui; cursor: pointer; }
  .group button + button { border-left: 1px solid #cbd5e1; }
  .group button[aria-pressed='true'] { background: #4f46e5; color: #fff; }
  .group button:focus-visible { outline: 3px solid #f59e0b; outline-offset: -3px; }
</style>
<div class='group' role='group' aria-label='View mode' id='g'>
  <button aria-pressed='true'>List</button>
  <button aria-pressed='false'>Grid</button>
  <button aria-pressed='false'>Table</button>
</div>
<script>
  var btns = document.querySelectorAll('#g button');
  btns.forEach(function (b) {
    b.addEventListener('click', function () {
      btns.forEach(function (x) { x.setAttribute('aria-pressed', 'false'); });
      b.setAttribute('aria-pressed', 'true');
    });
  });
</script>

Output

Press Run to execute.

Exercise: Build a reusable button with variants using custom propertiesHTML

Create a .btn base class that uses --bg and --fg custom properties. Add .success and .warning variants by only changing those properties. Add a hover color with color-mix(), a clear :focus-visible outline and a disabled style. The minimum height must be 44px.

Try it Yourself HTML

<style>
  .btn { font: 600 15px system-ui; padding: 10px 20px; border: 0; border-radius: 8px; cursor: pointer; }
  /* TODO: custom properties, hover with color-mix, focus-visible, disabled */
  /* TODO: .success and .warning variants */
</style>
<button class='btn'>Default</button>
<button class='btn success'>Success</button>
<button class='btn warning'>Warning</button>
<button class='btn' disabled>Disabled</button>

Output

Press Run to execute.

Show expected output

Three colored buttons with darker hover shades, a visible outline on keyboard focus, and a gray disabled button. All at least 44px tall.

This is a self-check — compare your result with the expected output above.

Was this page helpful?