Platform under construction

Components

Advanced

Buttons

Buttons are action components. Good button CSS makes actions obvious, touch-safe, keyboard-safe and visually consistent.

.button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.button:focus-visible { outline: 3px solid var(--focus); }

Component mental model

Buttons should feel clickable before they are clicked.

A button is not just a rounded rectangle with text. It is a promise that something will happen when the user activates it.

Good button styling communicates priority, state and affordance. Primary actions should stand out, secondary actions should support, and destructive actions should be unmistakable.

Production buttons need hover, focus-visible, active, disabled, loading and touch-safe sizing. A button without states is only half a component.

Action

A button should represent an action, not ordinary navigation text.

Priority

Primary, secondary and danger variants guide decisions.

States

Hover, focus, active, disabled and loading need deliberate styling.

Hit area

The clickable area must be comfortable for mouse, keyboard and touch.

Visual model

See the parts of the component before styling the surface.

Primary

Strong action

The main next step on the screen.

Secondary

Support action

Useful but less dominant.

Icon

Tool action

Compact action with a clear accessible name.

Disabled

Unavailable

Visible but clearly inactive.

Good CSS versus fragile CSS

Reusable button system

.button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: 999px;
}

.button:focus-visible { outline: 3px solid var(--focus); }
.button:active { transform: translateY(1px); }

Static visual only

.btn {
  padding: 6px 8px;
  border-radius: 4px;
  color: white;
}

Rules of thumb

Components need systems, not one-off decoration.

Style the element, not only the look

Use button elements for actions and links for navigation.

Define variants

Primary, secondary, subtle and danger variants should be consistent.

Protect focus

Never remove outlines without replacing them with a clear focus-visible style.

Make active feel physical

Small active feedback makes buttons feel responsive.

Design disabled honestly

Disabled buttons should look unavailable and avoid fake hover effects.

Size for touch

A 44px minimum height is a strong baseline for real interfaces.

Production thinking

A component is only good when real content and real states still work.

Why does this matter?

Buttons are where users commit. Weak button styling creates hesitation, misclicks and uncertainty.

Accessibility

Buttons need focus-visible, sufficient contrast and accessible names, especially for icon-only actions.

Production note

Centralize button CSS early. Random one-off buttons multiply quickly and make a product feel inconsistent.

SEO note

Buttons do not directly improve SEO, but clear actions improve engagement and reduce friction.

Live code lab

Change the CSS and watch the interface respond.

The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.

Mini assignment

Try this now.

Remove the focus-visible rule and explain what keyboard users lose.
Change min-height to 30px and judge the touch target.
Add a danger variant and choose a color that cannot be confused with primary.

Practice assignment

Do this before moving to the next lesson.

Create primary, secondary and icon button styles.
Add hover, active and focus-visible states.
Explain when to use a button element instead of an anchor.

HTML CSS

Live preview

Self-check

Before you continue, prove that you understand Buttons.