Coffee cup size radio
Three glasses of different sizes: the chosen one fills with coffee and foam and starts to steam.
Settings
Code
<fieldset class="uvq04-cup"><legend>Size</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">Small</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">Medium</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">Large</span><small>470 ml · 3,30 €</small></label></div></fieldset>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Radio buttons
See all Radio buttonsWhere to use it
Three clear glasses stand on a counter line as a size picker for a café menu. The chosen glass fills from the bottom with coffee, a darker crema band and milk foam, then thin wisps of steam drift above it, while the other glasses drain. Glass, liquid and steam are CSS only, which keeps it light for ordering apps and kiosks.
The main color is the coffee and the secondary color the foam, so tea, matcha or juice are easy variations. Change the names, volumes and prices in the labels, and use three or four sizes so the scale between them stays clear.