HTML + CSSBoutons

Bouton autocollant qui se décolle

Un autocollant découpé à bord blanc dont le coin se soulève au survol et se décolle davantage au clic.

Réglages

16px
1x

Code

<button class="uvq01-stk" type="button"><span class="bd"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6L2.5 9.4l6.6-.8z"/></svg><span>Rejoins le club</span></span><span class="fl" aria-hidden="true"></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.

Version Markdown avec tout le code, pour les assistants IA

Plus dans Boutons

Voir tout : Boutons

Où l’utiliser

Les autocollants en vinyle sont partout dans le design de marque, et ce bouton se comporte comme l'un d'eux : une forme découpée aux couleurs vives, à épais bord blanc, légèrement inclinée, un coin déjà relevé. Au survol, le coin se replie davantage et montre le dos brillant, et au clic il se décolle presque à moitié. Une longueur CSS enregistrée pilote ensemble la découpe et le rabat.

La couleur principale est l'autocollant et la secondaire le texte et l'icône : citron vert acide et noir ou rose et bordeaux ressortent très bien. Utilisez-le pour rejoindre un club, une sortie de merch, des badges ou une invitation à la newsletter pleine d'humour.