Micro-Interactions

Kleine Details die große Wirkung haben.

Micro-Interactions sind funktionale Animationen die Feedback geben, Aufmerksamkeit lenken und Interfaces menschlicher machen. Sie sind keine Deko — sie lösen echte UX Probleme.

1. Button Feedback Bestätigt dass etwas passiert

.btn-scale:active {
  transform: scale(0.95);
  transition: transform 0.1s;
}

.btn-glow:hover {
  box-shadow: 0 0 20px currentColor;
}

2. Loading States Zeigt dass gearbeitet wird

Skeleton Loading

Spinner

Pulse

3. Toggle Switch Sofortiges visuelles Feedback

Benachrichtigungen

.slider {
  transition: background 0.3s, transform 0.3s;
}

input:checked + .slider {
  background: #3b82f6;
}

input:checked + .slider::before {
  transform: translateX(24px);
}

4. Hover Card Effects Zeigt Interaktivität

Lift

Schwebt nach oben

Glow

Leuchtet auf

Border

Border ändert sich

5. Feedback States

✓ Gespeichert

✕ Fehler

💡 Key Insight

Jede Micro-Interaction sollte einen Zweck haben:

• Feedback: "Dein Klick wurde registriert"
• Status: "Das System arbeitet"
• Orientierung: "Hier kannst du interagieren"
• Freude: "Das hat Spaß gemacht"