HTML + CSSBoutons

Bouton à texte déroulant

Au survol, le libellé remonte et disparaît pendant qu'un second message arrive par le bas.

Réglages

16px
1x

Code

<button class="uv-roll"><span data-t="C’est parti !">Bonjour</span></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 à texte déroulant permet de dire deux choses au même endroit. « Menu » peut devenir « Voir le plat du jour » sur le site d'un restaurant, « Contact » se changer en « Écrivez-moi » sur un portfolio de freelance, ou « Choisir une offre » en « C'est parti » dans un tableau de prix. Le changement rebondit légèrement.

Gardez deux libellés de longueur proche, sinon le bouton paraît vide ou tassé au milieu de l'animation. Le second texte doit apporter quelque chose, un ton ou une promesse. S'il répète simplement le premier, un survol plus simple fera aussi bien l'affaire.