Micro-interactions

Motion mental model

Micro-interactions are small, but they decide whether the UI feels alive.

A micro-interaction is a small response to a user action or system state. It can confirm, guide, prevent mistakes or simply make the product feel more tangible.

Examples include a button pressing down, an underline filling on hover, a field showing valid state, a card revealing an action or a save badge changing state.

The best micro-interactions are nearly invisible until they are missing. They support the task instead of begging for attention.

Trigger

User action or system state starts the interaction.

Feedback

The UI answers with a visual change.

Timing

Short and intentional motion keeps the response crisp.

Recovery

The interaction should not hide errors or trap users.

Visual model

See the interaction sequence before writing the motion.

Tap

Action starts

The user presses a control.

Press

Physical feedback

The button moves one or two pixels.

Confirm

State appears

The interface shows success or progress.

Reset

Ready again

The component returns to a usable state.

Good CSS versus fragile CSS

Small purposeful feedback

.button { transition: transform 120ms ease, box-shadow 120ms ease; }
.button:active { transform: translateY(1px); box-shadow: none; }
.button[data-state="saved"]::after { content: "Saved"; }

Motion without purpose

.button:hover {
  animation: wobble .5s linear infinite;
  letter-spacing: .4em;
}

Rules of thumb

Motion should guide attention, confirm state and stay out of the way.

Start with purpose

A micro-interaction should confirm, guide, prevent or clarify.

Keep timing tight

Tiny interactions usually need tiny durations.

Use state, not magic

Data attributes and aria states can describe what changed.

Do not move layout

Small feedback should not push content around.

Support keyboard too

Micro-interactions should not be mouse-only.

Stop before it becomes noise

If the user notices the animation more than the task, pull it back.

Production thinking

Good animation is fast, purposeful, accessible and testable.

Why does this matter?

Micro-interactions are where craft becomes visible. They make a site feel premium because the interface answers the user with precision.

Accessibility

Micro-interactions still need focus-visible, reduced-motion behavior and state text when the state matters.

Production note

Document common interaction patterns so every button, card and nav item does not invent a new personality.

SEO note

Micro-interactions support engagement and conversion, but the content and structure must still stand on their own.

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 active state and notice how the button feels less physical.
Make the hover movement 12px and explain why it becomes too theatrical.
Add a data-state="saved" style that changes the label color or icon color.

Practice assignment

Do this before moving to the next lesson.

Create one small interaction that confirms user action.
Include hover, active and focus-visible states.
Add a reduced-motion fallback for the moving parts.

HTML CSS

body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: #07111f; font-family: Inter, system-ui, sans-serif; }
.save-button { min-height: 52px; display: inline-flex; align-items: center; gap: 10px; padding-inline: 22px; border: 1px solid #8cffc1; border-radius: 999px; background: #101827; color: white; font-weight: 1000; cursor: pointer; box-shadow: 0 16px 44px rgba(0, 0, 0, .28); transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease; }
.save-button__icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 999px; background: #8cffc1; color: #061018; transition: transform 140ms ease; }
.save-button:hover { transform: translateY(-2px); border-color: #62d5ff; }
.save-button:hover .save-button__icon { transform: scale(1.08); }
.save-button:active { transform: translateY(1px); box-shadow: 0 8px 22px rgba(0, 0, 0, .2); }
.save-button:focus-visible { outline: 3px solid #62d5ff; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .save-button, .save-button__icon { transition: none; } }

Live preview

Self-check

Before you continue, prove that you understand Micro-interactions.

Advanced

Answer these questions before moving on. If the motion has no purpose, no fallback or no state clarity, it is not production motion yet.

Can you describe the purpose of a micro-interaction?
Can you keep the motion short and subtle?
Can you avoid layout movement?
Can you support keyboard and touch users?
Can you stop before the animation becomes noise?

Senior audit upgrade

Compare good and bad micro-interactions.

A micro-interaction should confirm state, guide attention or reduce uncertainty. If it only shows off, it is probably noise.

Good

A button depresses slightly, focus is clear, a success message appears quickly.

Bad

A card jumps, text shifts, animation blocks input or repeats forever.

Measure

If users must wait for the flourish, the flourish is too heavy.

Chapter project

Add purposeful motion

Use transitions, transforms, keyframes, focus states and reduced motion without creating visual noise.

Build

a small interaction pass for buttons, navigation and feedback messages

Deliverables

motion tokens
transition states
reduced-motion alternative

Quality checks

no transition: all
no layout-shifting animation
motion has a purpose

Review question

What does each motion cue explain to the user?