By Mehdi HassanVisitors rarely notice a good micro-interaction. They notice that the site feels considered: buttons respond, forms reassure, nothing jumps. Most 'premium' feeling comes from a dozen of these small details done consistently, not from one big hero animation. This piece is part of our website animation guide, and it's deliberately concrete: every example comes with the timing and easing we start from.
What are micro-interactions in web design?
Micro-interactions in web design are small animations tied to a single user action and a single piece of feedback. A button that presses down when clicked, a toggle that slides, a field that shakes gently when invalid, a copy button that briefly says 'Copied'. Each answers one question: did that work, and what happens now?
Designers often describe a micro-interaction in four parts: the trigger (a hover, click or state change), the rules (what changes), the feedback (what the user sees) and the loops or modes (what happens on repeat). That framework is useful because it forces you to define the feedback, not just the animation.
What timing and easing make micro-interactions feel premium?
Premium micro-interactions are short, eased and small. The values below are our starting defaults, not universal rules; we tune them by eye per brand. A calm fintech brand might run slightly slower and softer, a developer tool slightly snappier. What matters is that the whole site shares one small set of values.
Token | Our starting value | Used for |
|---|---|---|
Instant | 100ms | Color and opacity changes on hover and press |
Quick | 150 to 200ms | Button lift, icon nudges, toggles |
Moderate | 250 to 300ms | Dropdowns, tooltips, small panels |
Ease out (entry) | cubic-bezier(0.22, 1, 0.36, 1) | Things appearing or moving into place |
Ease in (exit) | cubic-bezier(0.55, 0, 1, 0.45) | Things leaving or closing |
Distance | 2 to 8px | Hover lift and nudge distances |
Entry motion uses ease-out because things arriving should decelerate into place, like a physical object. Exits can be a little faster than entries, because the user has already decided to move on. Linear easing is fine for progress indicators and spinners, and almost nowhere else.
Which micro-interaction examples are worth copying?
The micro-interactions worth copying are the ones that give feedback on actions people take constantly: hovering, clicking, toggling, submitting and copying. These ten patterns are common across well-designed SaaS sites. The table summarizes them, and the notes below explain what each does well.
Example | Trigger | Motion | Why it works |
|---|---|---|---|
Button press | Click or tap | Scale to about 0.97, back on release, 100ms | Feels physical, confirms the click |
Card lift | Hover | Translate up 4px, soften shadow, 200ms ease-out | Signals the whole card is clickable |
Arrow nudge | Hover on link | Arrow moves right 3px, 150ms | Hints at direction without moving text |
Toggle switch | Click | Knob slides, track color fades, 200ms | Shows state change clearly |
Inline validation | Field blur | Message fades in under field, 150ms | Reassures without interrupting typing |
Copy to clipboard | Click | Icon swaps to a check for about 1.5s | Confirms an invisible action |
Submit to success | Form submit | Button shows spinner, then success state | Removes doubt about whether it sent |
Accordion open | Click | Height and chevron rotate, 250ms | Connects the header to its content |
Pricing toggle | Monthly or annual switch | Numbers crossfade, 200ms | Makes the price change noticeable |
Nav underline | Hover or active page | Underline scales from left, 200ms | Shows location and target |
Feedback on press and hover
The button press and card lift are the two that change how a site feels most. A tiny scale-down on press makes the button feel like an object. A small lift plus a softer shadow on cards tells people the whole card is a link. Keep the distance small, and animate transform rather than margin or top, so it stays smooth.
Feedback on invisible actions
Copying, submitting and saving all happen out of sight. Without feedback, people click twice. A short icon swap for copy, and a clear loading then success state for forms, removes the doubt. Our guide to form design best practices covers the states a form needs beyond the animation.
Feedback on state
Toggles, accordions and pricing switches change what's on screen. Motion here shows continuity: this content came from that header, this price replaced that one. In FAQ sections specifically, accordions should open quickly and never hide content from search engines, which we cover in FAQ sections that earn citations.
How to build the card lift without jank
Put the transition on the card itself: transform and box-shadow, 200ms, with an ease-out curve. On hover, translate the card up by 4px. Because animating box-shadow triggers paint, a cheaper trick is to put the stronger shadow on a pseudo-element behind the card and animate only that pseudo-element's opacity.
Add the same styles to the card's focus-visible state, so keyboard users get the same feedback. Under prefers-reduced-motion, keep the shadow change and drop the translate. Apply the rule once in the card component, so every card on the site behaves the same way.
How do you keep micro-interactions consistent across a site?
Treat motion like type and color: define a few tokens and use only those. Two or three durations, one entry curve, one exit curve and a distance rule are enough for an entire marketing site. Put them in CSS custom properties or your design system, and build hovers into components, not individual pages.
- Define tokens once: duration-fast, duration-base, ease-out, ease-in, lift-distance.
- Attach motion to components: every button and every card gets the same behavior automatically.
- Document it in Figma: note the trigger and token next to each component so developers don't guess.
- Match the brand: the curves should feel like the same company as the typography, as we explain in translating a brand into web design.
In product UI, the same rules apply but the stakes are higher, because people repeat the same interaction hundreds of times a day. Our web app UI design guide covers how motion tokens carry across from marketing site to product.
How do you make micro-interactions accessible?
Make micro-interactions accessible by pairing every hover with a focus state, keeping motion small and respecting prefers-reduced-motion. Hover-only feedback leaves keyboard and touch users out. Large or bouncy motion can bother people with vestibular disorders. And motion should never be the only signal that something changed.
- Focus-visible equals hover: whatever a hover does, keyboard focus should do too, plus a visible outline.
- Reduced motion: keep color and opacity changes, drop movement and scale.
- Don't rely on motion alone: a form error needs text and color, not just a shake.
- Respect contrast: hover color changes must keep text readable. See accessible design basics.
Our checklist for accessible web app UI goes deeper on focus management and state announcements for screen readers.
Which micro-interactions make a website feel cheap?
Micro-interactions feel cheap when they're slow, bouncy, inconsistent or everywhere at once. Elastic overshoot on every button, cursor followers, magnetic buttons on every link and text that scrambles on hover all signal 'template' rather than 'considered', unless they're a deliberate brand choice used sparingly.
- Overshoot and bounce on standard UI: fun once, tiring by the fifth click.
- Custom cursors that lag behind the pointer: they make the whole site feel slow.
- Different hover styles on similar elements: it reads as unfinished.
- Hover effects that move text: people lose their place while reading.
Restraint also helps when your site runs in several languages. Labels get longer in translation, so animations that depend on exact text widths break. We cover layout effects of translation in designing for multiple languages.
