HTML + CSSBoutons

Lettres en vague

Au survol, chaque lettre saute et change de couleur un instant après la précédente, comme une petite vague.

Réglages

16px
1x

Code

<button class="uv-lwv" aria-label="Commencer gratuitement"><span class="t" translate="no" aria-hidden="true">Commencer gratuitement</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

Voir tout : Boutons

Où l’utiliser

Cet appel à l'action découpe son propre libellé en lettres avec quelques lignes de JavaScript, puis une animation CSS les fait sauter l'une après l'autre avec une légère inclinaison. Le bouton garde un aria-label avec le texte complet, les lecteurs d'écran entendent donc un mot normal. Idéal sur les pages d'accueil d'applis, de jeux et de studios créatifs.

Les libellés de deux ou trois mots donnent la plus jolie vague. La couleur secondaire est la teinte que prend chaque lettre en haut de son saut, ainsi un accent chaud sur un bouton froid se voit sans autre effet.