HTML + CSSBotones

Acuarela que sube

La pintura sube por el papel con un borde mojado e irregular y deja la etiqueta en blanco.

Ajustes

16px
1x

Código

<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">Pintar</span></button>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Versión Markdown con todo el código, para asistentes de IA

Más en Botones

Ver todos: Botones

Dónde usarlo

En lugar de un barrido plano, este botón se llena como una acuarela sobre papel de grano: una aguada azul ultramar sube desde abajo, un filtro de turbulencia en SVG mantiene el borde mojado e irregular y se forma un cerco oscuro donde se acumula el pigmento. Un segundo pigmento florece en las esquinas. Encaja en escuelas de arte, papelerías y portfolios de ilustración.

El color principal es el pigmento base y el secundario el que se mezcla en las esquinas, así que índigo con rosa o verde vejiga con ocre se leen como pintura. La velocidad marca lo rápido que sube la aguada y la textura del papel sigue viéndose debajo.