Build an accessible interactive button

Combine a comfortable target, hover, visible focus, explicit transition and reduced motion.

Official sourceW3C WCAG 2.2 — visible keyboard focusReviewed: 2026-08-26

STEP 1 · LEARN

How it works

A robust component does not rely on one state. Minimum size helps touch, hover gives pointer feedback, focus-visible supports keyboard navigation, and motion preference can disable the transition.

Correct example

.action { min-height: 44px; transition: background-color 160ms ease; } .action:hover { background-color: #115e59; } .action:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .action { transition: none; } }

The same button provides feedback for touch, pointer and keyboard without imposing motion.

Common mistake

.action:hover { transform: scale(1.2); } .action:focus { outline: none; }

Strong scaling can destabilise the interface, while removing focus blocks keyboard users.

STEP 2 · APPLY

Your exercise

Complete a 44px min-height, 160ms ease background transition, #115e59 hover, 3px focus with 3px offset and transition: none for reduced motion.

index.htmlCSS

Safe resultisolated

The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked

STEP 4 · CHECK

What needs to pass

0%not checked

The button has a minimum height of 44px.
Only the background is transitioned.
Hover uses #115e59.
Focus has the required outline.
Focus has a 3px offset.
Reduced motion removes the transition.
The target element is present in the page.

Explain the solution logic

Each rule has one responsibility: size, pointer feedback, keyboard focus or motion adaptation.

How it works

Your exercise

Write and see the result

What needs to pass