HTML + CSSBoutons

Bouton contour qui se remplit

Un bouton à contour qui se remplit de couleur de gauche à droite au passage de la souris.

Réglages

16px
1x

Code

<button class="uv-fill">S’abonner</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

Un bouton contour qui se remplit au survol est le choix naturel pour les actions secondaires : « Télécharger le PDF » sur un portfolio, « S'abonner » en pied de page d'un blog ou « Voir la carte » à côté d'un « Réserver une table » plus affirmé. Au repos, il reste léger. Au survol, la couleur entre par la gauche.

Associez-le à un bouton plein de la même couleur et vous obtenez une paire principale et secondaire bien lisible, sans travail de design en plus. Une vitesse un peu plus lente rend le remplissage plus posé, ce qui va bien aux marques sobres.