Bouton tampon encreur
À la validation, un tampon rouge à l'encre usée s'abat sur la facture et le papier sursaute sous le choc.
Réglages
Code
<div class="uvq01-stp"><div class="doc" aria-hidden="true"><svg class="fx" width="0" height="0"><filter id="uvq01-grit"><feTurbulence type="fractalNoise" baseFrequency="1.2" numOctaves="2" seed="7"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 1.75"/><feComposite in="SourceGraphic" operator="in"/></filter></svg><span class="h"><b>Facture</b><span>0187</span></span><span class="ln"></span><span class="ln s"></span><span class="ln m"></span><span class="tt"><span>Montant</span><b>1.240,00 €</b></span><span class="mk">APPROUVÉ</span></div><button class="bt" type="button" aria-pressed="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.5 3.5h5l-.8 6h-3.4z"/><path d="M5 13.5c0-2.2 1.8-4 4-4h6c2.2 0 4 1.8 4 4v1.5H5z"/><path d="M6 19h12"/></svg><span>Approuver</span></button></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.
Plus dans Boutons
Voir tout : BoutonsOù l’utiliser
Les validations se résument souvent à une case à cocher, ce bloc leur donne du poids : une facture crème au-dessus d'un bouton sombre, et un clic fait claquer un tampon rouge sur le papier. Un filtre de bruit SVG use l'encre comme sur un vrai tampon en caoutchouc, et la carte tremble à l'impact. Un second clic soulève le tampon, et aria-pressed indique l'état.
La couleur principale est l'encre et la secondaire le papier : un tampon bleu ou vert pour d'autres statuts se règle vite. Remplacez les lignes de la facture par vos données et gardez un mot de tampon court pour qu'il tienne en biais.