Bouton à flèche qui s'étire
La flèche à côté du texte glisse vers l'avant au survol et son trait s'allonge en même temps.
Réglages
Code
<button class="uv-arrow">Continuer<svg viewBox="0 0 24 12"><path class="l" d="M2 6h18"/><path d="M15 1l6 5-6 5"/></svg></button>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Boutons
Où l’utiliser
La flèche qui s'étire dit « on avance » sans un mot, elle convient donc aux étapes qui mènent quelque part : « Continuer » dans un tunnel de commande, « Leçon suivante » dans une formation en ligne ou « Voir l'étude de cas » à la fin d'un projet de portfolio. Un bouton fléché animé qui invite au clic sans forcer.
Évitez-le pour revenir en arrière, annuler ou supprimer : la flèche promet une progression. Il fonctionne aussi très bien comme lien « Article suivant » en bas d'un billet de blog, quand le lecteur est déjà lancé et qu'une petite incitation suffit.