Créer un effet de survol inversé avec mix-blend-mode en CSS

Aujourd'hui, je vais vous montrer comment créer un effet de survol vraiment cool qui inverse les couleurs en utilisant la propriété mix-blend-mode. Cette technique est particulièrement efficace pour les contrôles monochromes et apporte une touche d'interactivité moderne à vos interfaces.

Le CSS

Voici le code CSS pour créer l'effet :

button > span {
  left: calc(var(--x, 0) * 1px);
  top: calc(var(--y, 0) * 1px);
  mix-blend-mode: difference;
}

L'astuce réside dans l'utilisation de mix-blend-mode: difference qui agit comme un inverseur de couleurs. C'est particulièrement efficace avec des éléments monochromes.

L'animation en JavaScript

Pour rendre l'effet dynamique, nous devons ajouter un peu de JavaScript :

const UPDATE = ({target, x, y }) => {
  const bounds = target.getBoundingClientRect()
  target.style.setProperty('--x', x - bounds.left)
  target.style.setProperty('--y', y - bounds.top)
}

const BTNS = document.querySelectorAll('button')
BTNS.forEach(BTN => BTN.addEventListener('pointermove', UPDATE))

Les états de survol et focus

N'oublions pas les états de survol et de focus pour une meilleure accessibilité :

button:is(:hover, :focus-visible) {
  --active: 1;
}

button span {
  transform: translate(-50%, -50%) scale(calc(var(--active, 0) * 3);
  transition: transform 0.25s;
}

Pourquoi c'est cool ?

• Effet visuel moderne et attrayant
• Performance optimisée grâce à l'utilisation des propriétés CSS personnalisées
• Excellente accessibilité avec la prise en charge du focus
• Fonctionne parfaitement avec les thèmes sombres et clairs