Watercolor fill button
Paint wicks up through the paper with a wet, uneven edge and leaves the label in white.
Settings
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">Paint</span></button>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Buttons
See all ButtonsWhere to use it
Instead of a flat color sweep, this button fills like watercolor on cold press paper: an ultramarine wash rises from the bottom, an SVG turbulence filter keeps its edge wet and irregular, and a darker rim forms where the pigment collects, just like a real wash drying. A second pigment blooms in the lower corners. It suits art schools, stationery shops, illustration portfolios and slow living brands.
The main color is the main pigment and the secondary color is the bloom that mixes into it, so indigo with rose or sap green with ochre both read as paint. Speed sets how quickly the wash climbs, and the paper texture stays visible underneath.