HTML + CSSBotones
Botón con texto que rueda
Al pasar el ratón, el texto sube y desaparece mientras entra un segundo mensaje desde abajo.
Ajustes
16px
1x
Código
<button class="uv-roll"><span data-t="¡Vamos!">Hola</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
Dónde usarlo
Un botón con texto que rueda te deja decir dos cosas en el mismo hueco. «Carta» puede convertirse en «Mira qué hay hoy» en la web de un restaurante, «Contacto» en «Hablemos» en un portfolio freelance, o «Elegir plan» en «Vamos allá» en una tabla de precios. El cambio lleva un pequeño rebote.
Procura que los dos textos tengan una longitud parecida; si no, el botón se ve vacío o apretado a mitad de la animación. El segundo mensaje debería aportar algo, un tono o una promesa. Si solo repite el primero, basta con un hover más sencillo.