HTML + CSSBotones
Botón con flecha que avanza
La flecha junto al texto se desliza hacia delante al pasar el ratón y su trazo se alarga.
Ajustes
16px
1x
Código
<button class="uv-arrow">Continuar<svg viewBox="0 0 24 12"><path class="l" d="M2 6h18"/><path d="M15 1l6 5-6 5"/></svg></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
La flecha que se alarga dice «adelante» sin palabras, así que encaja en pasos que llevan a algún sitio: el «Continuar» de un proceso de compra por fases, la «Siguiente lección» de un curso online o el «Ver el caso completo» de un proyecto en tu portfolio. Es un botón con flecha animada que invita sin gritar.
No lo uses en acciones para volver, cancelar o borrar, porque la flecha promete avanzar. También queda muy bien como enlace a «Siguiente artículo» al final de un post, cuando la gente ya está leyendo y basta con un pequeño empujón.