HTML + CSSBoutons
Cercle qui devient pilule
Une pastille ronde avec une flèche, à côté du texte, grandit jusqu'à envelopper tout le bouton de couleur.
Réglages
16px
1x
Code
<button class="uv-cpl"><span class="ou"></span><span class="a"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span><span class="t">Parlons-en</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 : BoutonsOù l’utiliser
Les sites d'agences et les portfolios adorent ce motif, car il reste discret au repos, juste un cercle coloré avec une flèche à côté d'un mot, et devient un vrai appel à l'action dès qu'on montre de l'intérêt. Le cercle s'étire avec un ressort doux, la flèche file à l'autre bout et le texte se recentre en blanc.
Il fonctionne mieux avec un ou deux mots comme Contact, Parlons-en ou Voir les projets. Le focus clavier déclenche la même ouverture, on voit donc clairement l'action active en naviguant avec Tab.