Input feedback

Button & Form Micro-Interactions

Controls should acknowledge input immediately, make the new state unmistakable, and stay usable with a keyboard or reduced motion. The animation supports the state change; it never becomes the only evidence that anything happened.

Respond quickly: Use roughly 150ms for hover and press feedback.
Preserve state: The control remains understandable after motion ends.
Keep semantics: Start with a real button, input, or checkbox.

Pattern examples

5 ways to communicate the state change

Hover, focus, press, or toggle the specimens. Each recipe keeps the durable state in semantic markup and uses animation as a supporting layer.

Notifications

Toggle switch

Slide a thumb between two resting positions while the track changes color.

Use a real checkbox and keep the checked state available to assistive technology.

transition: transform 200ms ease-out, background-color 200ms ease-out;

Expanding search

Grow the field on focus to reveal more room without moving unrelated controls.

Reserve enough layout space for the expanded width so the page does not jump.

transition: inline-size 200ms ease-out;
&:focus { inline-size: 16rem; }

Include dark mode

Animated checkbox

Reveal the check after the box changes state, keeping the confirmation compact.

Pair the visual mark with the native checked property; never animate a decorative box alone.

transition: background-color 150ms ease-out, transform 150ms ease-out;

Counter increment

Nudge a value upward after an add action to connect the click with its result.

Announce meaningful total changes in a polite live region when they are not otherwise obvious.

animation: counter-rise 200ms ease-out;

Press feedback

Compress a button slightly while it is pressed so pointer input feels tactile.

Keep the scale change subtle and preserve an obvious focus-visible ring.

transition: transform 120ms ease-out;
&:active { transform: scale(.97); }

Implementation check

Ship the fallback with the effect.

Test keyboard focus, touch, reduced motion, slow work, failure, repeated activation, and the final resting state. A robust interaction remains understandable when every transition is removed.

@media (prefers-reduced-motion: reduce) {
  .motion {
    animation: none;
    transform: none;
    transition-duration: 0.01ms;
  }
}

Continue the reference

Related micro-interaction guides

Compare the neighboring feedback patterns before choosing an effect.

View all patterns

Feedback & validationDesign loading, error, success, copy, notification, and tooltip micro-interactions that confirm actions without relying on motion alone.Read guide Status & progressUse skeletons, progress bars, spinners, and pulsing dots to communicate loading states and task completion without layout shifts.Read guide Navigation & transitionsRoute progress bars, sliding tab indicators, view transitions, condensing headers, and scroll progress that keep navigation legible.Read guide

Plan the complete React experience.

Map the components and states around these interactions, then generate the project structure from one visual workspace.

Start planning free