Micro-interactions & UI Feedback
Micro-interactions are small animations that give users feedback - a button press effect, a toggle switch, a notification badge bounce, a success checkmark. They make interfaces feel responsive and alive.
Micro-interaction Patterns
- Button press - :active scale(0.95) with fast transition. Immediate tactile feedback
- Toggle switch - Slider that moves left/right with background color change
- Like/heart animation - Scale bounce on click with color change
- Form validation - Green border + checkmark on valid input, red + shake on invalid
- Notification badge - Pulse or bounce animation to draw attention
- Copy button - Changes text from 'Copy' to 'Copied!' with a brief state change
- Ripple effect - Material Design click ripple using pseudo-element animation
Micro-interaction Code
/* Button press feedback */
.btn-press {
transition: transform 0.1s ease;
}
.btn-press:active {
transform: scale(0.95);
}
/* Toggle switch */
.toggle {
width: 52px; height: 28px;
background: #ccc;
border-radius: 14px;
position: relative;
cursor: pointer;
transition: background 0.3s;
}
.toggle::after {
content: '';
width: 24px; height: 24px;
background: white;
border-radius: 50%;
position: absolute;
top: 2px; left: 2px;
transition: transform 0.3s;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle.active { background: #2ecc71; }
.toggle.active::after { transform: translateX(24px); }
/* Shake on error */
@keyframes shake {
0%, 100% { transform: translateX(0); }
20%, 60% { transform: translateX(-6px); }
40%, 80% { transform: translateX(6px); }
}
.input-error {
border-color: #e74c3c !important;
animation: shake 0.4s ease;
}
/* Notification badge pulse */
.badge { position: relative; }
.badge::after {
content: '3';
position: absolute;
top: -8px; right: -8px;
background: #e74c3c;
color: white;
font-size: 11px;
width: 20px; height: 20px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
animation: pulse 2s infinite;
}Tip
The :active scale(0.95) press effect is one of the most impactful micro-interactions you can add. It takes 2 lines of CSS: .btn:active { transform: scale(0.95); } paired with transition: transform 0.1s ease on the base element. This tiny touch makes buttons feel physically clickable - like a real button press.
Transitions for state changes, @keyframes for complex multi-step animations
Common Mistake
Overusing micro-interactions on every element. Excessive animations become noise that users tune out or find distracting. Apply micro-interactions strategically: buttons (press + hover), form validation (success/error states), and key CTAs. Not every div needs a bounce animation.
Practice Task
Add micro-interactions to a form: (1) All buttons get :active { transform: scale(0.95) } press effect, (2) Valid inputs get a green border + checkmark (✓) using ::after content, (3) Invalid inputs get red border + @keyframes shake animation (4 quick left-right movements), (4) A submit button changes text from 'Send' to 'Sent ✓' on click.
Quick Quiz
Key Takeaways
- Micro-interactions are small animations that give users feedback - a button press effect, a toggle switch, a notification badge bounce, a success checkmark.
- Button press - :active scale(0.95) with fast transition. Immediate tactile feedback
- Toggle switch - Slider that moves left/right with background color change
- Like/heart animation - Scale bounce on click with color change