HTML + CSSBotones
Botón de borde dibujado
Al pasar el ratón, los cuatro lados del borde se trazan uno detrás de otro, como un lápiz.
Ajustes
16px
1x
Código
<button class="uv-draw"><b></b><b></b><b></b><b></b>Explorar</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
Este botón con borde que se dibuja tiene un aire editorial. Encaja en el «Ver proyectos» de un estudio de arquitectura, en el «Ver la colección» de un lookbook de moda o en el botón de contacto de la web de un fotógrafo. Las líneas recorren el rectángulo lado a lado, como un pequeño dibujo.
La vuelta completa dura casi un segundo y quien mueve el ratón rápido solo ve la mitad. Si te molesta, sube la velocidad. Queda mejor en diseños minimalistas, con líneas finas y mucho aire, que en páginas cargadas de color.