Créer et appliquer des curseurs personnalisés à l'aide de CSS et d'images

Les curseurs personnalisés vous permettent d’adapter l’expérience utilisateur avec des indices visuels qui correspondent à votre marque ou à vos objectifs créatifs. Qu’il s’agisse d’une icône dessinée à la main, d’un pointeur de type jeu vidéo, ou simplement d’une variante amusante de la flèche par défaut, créer un curseur personnalisé avec CSS est plus facile qu’il n’y paraît. Ce guide vous montre comment procéder étape par étape.

Syntaxe de base de la propriété CSS cursor

CSS fournit une variété de types de curseurs intégrés. Voici comment les utiliser :

.default {
  cursor: default;
}
.pointer {
  cursor: pointer;
}
.text {
  cursor: text;
}
.help {
  cursor: help;
}
.progress {
  cursor: progress;
}

Ces options intégrées couvrent les interactions standard. Mais pour aller plus loin, vous pouvez utiliser votre propre image.

Créer un curseur personnalisé à partir d’une image

Pour utiliser une image comme curseur, vous pouvez passer une URL à la propriété cursor.

Exemple :

.custom-cursor {
  cursor: url('cursor.png') 4 4, auto;
}

• url('cursor.png') est votre image personnalisée
• 4 4 est le point d’action (où le clic est enregistré)
• auto est le curseur de repli si l’image ne se charge pas

Formats pris en charge

• .cur et .ico (fonctionnent mieux sur Windows et Edge)
• .png (largement compatible, mais peut ignorer les points d’action dans certains navigateurs)
• .svg (moins pris en charge pour les curseurs)

Taille recommandée

• Tenez-vous-en à 32x32 pixels ou moins pour un comportement cohérent
• Les images plus grandes que 128x128 pourraient être ignorées ou redimensionnées de manière incohérente

Curseur uniquement au survol

Pour afficher un curseur personnalisé uniquement lors du survol d’éléments spécifiques :

.button:hover {
  cursor: url('hover-cursor.png'), pointer;
}

Cela conserve le curseur par défaut ailleurs et personnalise le retour d’interaction.

Conseils d’alignement et de compatibilité des curseurs

• Les valeurs de point d’action sont cruciales — elles définissent le point actif du curseur.
• Les solutions de repli assurent une dégradation élégante.
• Les tests sur Chrome, Firefox, Safari et Edge sont essentiels.

.cursor-test {
  cursor: url('cursor.png') 16 0, auto;
}

Utilisez des outils comme les devtools du navigateur ou des éditeurs d’images pour déterminer les coordonnées appropriées du point d’action.

Astuce supplémentaire : Éviter les curseurs flous

Certains navigateurs redimensionnent les curseurs PNG s’ils ne sont pas parfaitement alignés sur les pixels. Pour éviter un rendu flou :

• Utilisez une résolution exacte 1:1 (par exemple, 32x32)
• Évitez le rembourrage transparent dans vos images de curseur

Curseurs animés personnalisés (optionnel)

Les curseurs animés ne sont pas nativement pris en charge, mais il existe deux solutions courantes :

1. Utiliser un GIF

.cursor-gif {
  cursor: url('animated-cursor.gif'), auto;
}

• Fonctionne dans certains navigateurs, mais pas de manière cohérente.
• Le GIF peut scintiller ou être ignoré.

2. Utiliser JavaScript pour suivre la souris

const cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', e => {
  cursor.style.left = e.pageX + 'px';
  cursor.style.top = e.pageY + 'px';
});

Puis styliser la div .cursor :

.cursor {
  position: fixed;
  pointer-events: none;
  width: 32px;
  height: 32px;
  background-image: url('custom.png');
  background-size: cover;
  z-index: 9999;
}

Cas d’utilisation pour les curseurs animés

• Jeux et interfaces ludiques
• Sites web créatifs personnalisés ou portfolios

Considérations d’accessibilité et d’expérience utilisateur

Les curseurs personnalisés doivent améliorer — et non entraver — l’utilisabilité. Gardez à l’esprit :

• Évitez de remplacer les curseurs sur les champs de saisie et les liens, sauf si cela ajoute de la clarté
• Assurez-vous que les conceptions visuelles n’interfèrent pas avec le comportement attendu du pointeur
• Utilisez des points d’action clairs pour éviter les erreurs de clic

Bonnes pratiques

• Testez avec des utilisateurs de clavier et de lecteurs d’écran
• Gardez les curseurs visuellement distincts et légers
• Évitez d’appliquer des curseurs globalement (par exemple, au body) sauf si cela a du sens contextuellement

Problèmes courants et débogage

Le curseur ne s’affiche pas ?

• Confirmez que le chemin de l’image est correct
• Utilisez des formats et dimensions pris en charge
• Ajoutez une solution de repli : cursor: url(...), auto;

Point d’action mal aligné ?

• Ajustez les coordonnées X et Y dans la valeur cursor
• Prévisualisez dans un éditeur d’images pour déterminer le point de clic exact

Ne fonctionne pas dans Firefox ou Safari ?

• Essayez d’utiliser .cur ou .ico au lieu de .png
• Évitez les formats SVG et animés pour les interactions critiques
• Safari ignore complètement certains formats d’image de curseur

Application au mauvais élément

Si votre curseur n’est pas visible, assurez-vous que le CSS est appliqué à l’élément visible et interactif. Par exemple :

body {
  cursor: url('cursor.png'), default;
}

Conclusion

Les curseurs personnalisés peuvent ajouter du raffinement et de la fantaisie à votre interface utilisateur, mais ils s’accompagnent de particularités liées aux navigateurs. Tenez-vous-en aux formats bien pris en charge, testez sur différents navigateurs, et incluez toujours une solution de repli pour garantir l’utilisabilité. Utilisez les curseurs personnalisés de manière sélective là où ils améliorent la clarté ou renforcent l’image de marque, et évitez la surutilisation là où ils pourraient dérouter les utilisateurs.

FAQ