HTML + CSSRadio buttons

Radio con punto que rebota

El punto interior aparece desde el centro con un pequeño rebote al elegir una opción.

Ajustes

16px
1x

Código

<div class="uv-rdd"><label><input type="radio" name="rdd" checked><span class="rb"><i></i></span>Diario</label><label><input type="radio" name="rdd"><span class="rb"><i></i></span>Semanal</label><label><input type="radio" name="rdd"><span class="rb"><i></i></span>Mensual</label></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

Dónde usarlo

El radio de toda la vida con algo más de vida, para elecciones sencillas: cada cuánto quieres recibir la newsletter, a diario, cada semana o cada mes, o cada cuánto te avisa una app de entrenamiento. El punto entra con un salto y la opción nueva queda clarísima. Un radio button animado en CSS que todo el mundo reconoce.

Como se parece mucho a un radio estándar, es una apuesta segura para formularios largos y páginas de ajustes. Coloca las opciones en vertical, como en la demo, si las etiquetas tienen largos distintos.