Bouton aquarelle
La peinture remonte dans le papier avec un bord mouillé et irrégulier, et laisse le libellé en blanc.
Réglages
Code
<button class="uvq01-wtc" type="button"><svg class="fx" width="0" height="0" aria-hidden="true"><filter id="uvq01-wet" x="-20%" y="-20%" width="140%" height="140%"><feTurbulence type="fractalNoise" baseFrequency=".035 .07" numOctaves="3" seed="4" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale="16" xChannelSelector="R" yChannelSelector="G"/></filter></svg><span class="wt" aria-hidden="true"><i></i></span><span class="t">Peindre</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
Au lieu d'un aplat qui balaie le bouton, celui-ci se remplit comme une aquarelle sur papier à grain : un lavis outremer monte par le bas, un filtre de turbulence SVG garde son bord humide et irrégulier, et une auréole sombre se forme là où le pigment s'accumule, comme un vrai lavis qui sèche. Un second pigment fleurit dans les coins. Pour les écoles d'art, papeteries et portfolios d'illustration.
La couleur principale est le pigment de base et la secondaire celui qui fleurit dedans : indigo et rose ou vert de vessie et ocre évoquent bien la peinture. La vitesse règle la montée du lavis, et la texture du papier reste visible dessous.