Aquarell-Button
Die Farbe kriecht mit nassem, unruhigem Rand das Papier hinauf und lässt die Beschriftung weiß zurück.
Einstellungen
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">Malen</span></button>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Buttons
Alle ansehen: ButtonsWofür du ihn nutzen kannst
Statt einer flachen Farbfläche füllt sich dieser Button wie Aquarell auf rauem Papier: Eine ultramarinblaue Lasur steigt von unten auf, ein SVG-Turbulenzfilter hält ihren Rand nass und unregelmäßig, und dort, wo sich das Pigment sammelt, entsteht ein dunklerer Saum wie beim Trocknen einer echten Lasur. Ein zweites Pigment blüht in den unteren Ecken auf. Passt zu Kunstschulen, Schreibwarenläden, Illustrationsportfolios und ruhigen Marken.
Die Hauptfarbe ist das Grundpigment, die Zweitfarbe die Blüte, die sich hineinmischt. Indigo mit Rosa oder Saftgrün mit Ocker wirken beide wie echte Farbe. Die Geschwindigkeit bestimmt, wie schnell die Lasur steigt, die Papierstruktur bleibt darunter sichtbar.