Bechergröße für Kaffee
Drei Gläser in verschiedenen Größen: Das gewählte füllt sich mit Kaffee und Schaum und beginnt zu dampfen.
Einstellungen
Code
<fieldset class="uvq04-cup"><legend>Größe</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">Klein</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">Mittel</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">Groß</span><small>470 ml · 3,30 €</small></label></div></fieldset>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Radiobuttons
Alle ansehen: RadiobuttonsWofür du ihn nutzen kannst
Drei Klargläser stehen auf einer Theke und dienen als Größenwahl für eine Café-Karte. Das gewählte füllt sich von unten mit Kaffee, einem dunkleren Crema-Streifen und Milchschaum, dann steigen feine Dampffäden auf, während die anderen Gläser sich leeren. Glas, Flüssigkeit und Dampf sind reines CSS und damit leicht für Bestell-Apps und Kioske.
Die Hauptfarbe ist der Kaffee, die Zweitfarbe der Schaum, Tee, Matcha oder Saft sind also schnell gemacht. Ändere Namen, Mengen und Preise in den Beschriftungen und nutze drei oder vier Größen, damit der Unterschied klar bleibt.