N°09 · CSS/JS · Feedback & États

Micro-interactions

Six patterns fondamentaux d'états bouton. Chaque micro-interaction est un dialogue : trigger → action → feedback → boucle. Testez chaque pattern et ressentez la différence de qualité perçue.

Scale (press)

Glow (hover)

Ripple (click)

Morph (success)

Shake (error)

Progress (loading)

// Ripple — Material Design pattern en vanilla
btn.addEventListener('click', (e) => {
  const ripple = document.createElement('span');
  const rect = btn.getBoundingClientRect();
  const size = Math.max(rect.width, rect.height) * 2;

  Object.assign(ripple.style, {
    width: size + 'px', height: size + 'px',
    left: (e.clientX - rect.left - size/2) + 'px',
    top: (e.clientY - rect.top - size/2) + 'px',
    position: 'absolute', borderRadius: '50%',
    background: 'rgba(0,0,0,0.3)',
    transform: 'scale(0)', animation: 'ripple .6s ease-out'
  });
  btn.appendChild(ripple);
  setTimeout(() => ripple.remove(), 600);
});

À toi de jouer

Le « morph » transforme un bouton rectangulaire en cercle de succès. Quel timing (durée + easing) rend la transformation la plus naturelle ? Essayez de combiner scale + ripple sur un même bouton.

Le détail qui fait la différence : formez-vous aux micro-interactions

Réserver un créneau