Tamaño de la taza de café
Tres vasos de cristal de distinto tamaño: el elegido se llena de café con espuma y empieza a echar vapor.
Ajustes
Código
<fieldset class="uvq04-cup"><legend>Tamaño</legend><div class="op"><label style="--k:0.78"><input type="radio" name="uvq04-cup"><span class="gl" aria-hidden="true"><span class="st"><i></i><i></i><i></i></span><span class="cp"></span></span><span class="nm">Pequeño</span><small>250 ml · 2,20 €</small></label><label style="--k:0.9"><input type="radio" name="uvq04-cup" checked><span class="gl" aria-hidden="true"><span class="st"><i></i><i></i><i></i></span><span class="cp"></span></span><span class="nm">Mediano</span><small>350 ml · 2,80 €</small></label><label style="--k:1.04"><input type="radio" name="uvq04-cup"><span class="gl" aria-hidden="true"><span class="st"><i></i><i></i><i></i></span><span class="cp"></span></span><span class="nm">Grande</span><small>470 ml · 3,30 €</small></label></div></fieldset>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
Ver todos: Radio buttonsDónde usarlo
Tres vasos de cristal sobre una barra hacen de selector de tamaño para la carta de una cafetería. El elegido se llena desde abajo de café, una franja más oscura de crema y espuma de leche, y luego suben unas finas columnas de vapor mientras los otros vasos se vacían. Cristal, líquido y vapor son solo CSS, así que pesa poco en apps de pedidos y quioscos.
El color principal es el café y el secundario la espuma, así que té, matcha o zumo son variantes fáciles. Cambia nombres, volúmenes y precios en las etiquetas, y usa tres o cuatro tamaños para que la escala entre ellos se entienda.