AIMRAN
HTML + CSSRadio buttons

Radio con punto saltarín

Un único punto salta de una opción a otra y se estira como gelatina durante el viaje.

Ajustes

16px
1x

Código

<div class="uv-rdj"><span class="dt"></span><button class="on"><span class="sl"></span>Uno</button><button><span class="sl"></span>Dos</button><button><span class="sl"></span>Tres</button><button><span class="sl"></span>Cuatro</button></div>

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 Radio buttons

Radio con punto que rebota

Radio buttonsHTML + CSS

Radio con anillo dibujado

Radio buttonsHTML + CSS

Selector con píldora deslizante

Radio buttonsHTML + CSS

Tarjetas radio con icono

Radio buttonsHTML + CSS

Radio con relleno líquido

Radio buttonsHTML + CSS

Pestañas verticales con luz

Radio buttonsHTML + CSS

Selector de planes

Radio buttonsHTML + CSS

Valoración con estrellas y texto

Radio buttonsHTML + CSS

Dónde usarlo

Aquí un solo punto viaja entre las opciones y se estira por el camino. Ese movimiento juguetón encaja en tests y cuestionarios cortos: las respuestas de un juego de preguntas, el «¿Cuántas personas sois en el equipo?» del onboarding o un test de personalidad. Un grupo de radios animado en HTML, CSS y algo de JavaScript.

El estirón es toda la gracia, así que deja hueco suficiente entre opciones para que se vea el salto. Va bien en una lista vertical de hasta cinco o seis respuestas; en horizontal pierde el efecto.