HTML + CSSBotones

Botón que se rellena

Un botón de contorno que se llena de color de izquierda a derecha al pasar el ratón.

Ajustes

16px
1x

Código

<button class="uv-fill">Suscribirse</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.

Más en Botones

Dónde usarlo

Un botón de contorno que se rellena al hacer hover es la opción natural para acciones secundarias: «Descargar el PDF» en un portfolio, «Suscribirse» en el pie de un blog o «Ver carta» junto a un «Reservar mesa» más marcado. En reposo es ligero y discreto; al pasar el ratón, el color entra desde la izquierda.

Ponlo al lado de un botón sólido del mismo color y tendrás una pareja principal y secundaria clara sin diseñar nada más. Con la velocidad un poco más baja el relleno se nota más pausado, algo que agradecen las marcas tranquilas.