AIMRAN
HTML + CSSRadio buttons

Selector con píldora deslizante

Una píldora de color se desliza tras las opciones y se ajusta al ancho de la que pulses.

Ajustes

16px
1x

Código

<div class="uv-rds"><span class="p"></span><button class="on">Mensual</button><button>Anual</button><button>Siempre</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

Tarjetas radio con icono

Radio buttonsHTML + CSS

Radio con punto saltarín

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

Es el interruptor que ves en casi todas las páginas de precios: pago mensual, anual o de por vida. También sirve para «A domicilio / Recoger» en la web de un restaurante o para pasar de mapa a lista en un buscador de pisos. La píldora se adapta a cada etiqueta. Un segmented control en HTML, CSS y algo de JavaScript.

Úsalo con dos, tres o como mucho cuatro opciones cortas; con más, la píldora recorre demasiado y las etiquetas se aprietan. Si el pago anual sale más barato, dilo en la propia etiqueta, tipo «Anual −20 %».