HTML + CSSBoutons

Enveloppe à cachet de cire

La lettre glisse dans l'enveloppe, le rabat se ferme et un cachet de cire tombe dessus avant que l'enveloppe se rouvre.

Réglages

16px
1x

Code

<div class="uvq01-env"><button class="e" type="button"><span class="bk" aria-hidden="true"></span><span class="fl" aria-hidden="true"></span><span class="lt"><span>Envoyer l’invitation</span></span><span class="fr" aria-hidden="true"></span><span class="sl" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"><path d="M12 4.5l2.2 4.6 5 .6-3.7 3.4 1 5-4.5-2.5-4.5 2.5 1-5-3.7-3.4 5-.6z"/></svg></span></button><span class="ok" role="status"></span><span class="msg" hidden>Envoyée</span></div>

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

Un bouton d'envoi avec un peu de cérémonie : une enveloppe kraft contient une lettre où votre libellé est écrit en italique. Au clic, la lettre descend, le rabat se replie en 3D par-dessus et un cachet de cire bordeaux à l'étoile en relief se pose sur la pointe en s'écrasant un peu. Une ligne d'état confirme l'envoi, lecteurs d'écran compris. Idéal pour les invitations, mariages et remerciements.

La couleur principale est la cire et la secondaire le papier : cire marine sur blanc ou or sur noir se règlent vite. Limitez le libellé à deux ou trois mots pour qu'il tienne sur la carte, l'enveloppe se rouvre seule au bout de quelques secondes.