HTML + CSSRadio buttons
Radio con relleno líquido
El color sube dentro del círculo como el agua y su superficie ondulada sigue girando despacio.
Ajustes
16px
1x
Código
<div class="uv-rdl"><label><input type="radio" name="rdl" checked><span class="rb"><i></i></span>Agua</label><label><input type="radio" name="rdl"><span class="rb"><i></i></span>Zumo</label><label><input type="radio" name="rdl"><span class="rb"><i></i></span>Café</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
Un radio que se llena como un vaso pega con todo lo que se bebe o se sirve: elegir agua, zumo o café en la app de pedidos de una cafetería, la leche del café o el tamaño de un batido. También encaja en una app para beber más agua. Un radio button líquido en CSS con degradado.
La ola se sigue moviendo mientras la opción está marcada, así que úsalo donde haya pocas opciones en pantalla. Elige dos tonos del mismo color para el degradado; así parece más un líquido de verdad.