HTML + CSSBotones
Círculo que se abre en píldora
Un círculo con flecha junto al texto crece hasta envolver todo el botón de color.
Ajustes
16px
1x
Código
<button class="uv-cpl"><span class="o"></span><span class="a"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span><span class="t">Hablemos</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.
Más en Botones
Ver todos: BotonesDónde usarlo
A las webs de agencias y portfolios les encanta este patrón porque en reposo es tranquilo, solo un círculo de color con una flecha al lado de una palabra, y se convierte en una llamada a la acción completa en cuanto muestras interés. El círculo se estira con un muelle suave, la flecha viaja al otro extremo y el texto se recoloca en blanco.
Funciona mejor con una o dos palabras como Contacto, Hablemos o Ver proyectos. El foco del teclado dispara la misma expansión, así que al tabular por la página se ve qué acción está activa.