Radio mit Flüssigkeitsfüllung
Die Farbe steigt im Kreis wie Wasser, und die wellige Oberfläche dreht sich dabei langsam weiter.
Einstellungen
Code
<div class="uv-rdl"><label><input type="radio" name="rdl" checked><span class="rb"><i></i></span>Wasser</label><label><input type="radio" name="rdl"><span class="rb"><i></i></span>Saft</label><label><input type="radio" name="rdl"><span class="rb"><i></i></span>Kaffee</label></div>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
Wofür du ihn nutzen kannst
Ein Radio-Button, der sich wie ein Glas füllt, passt zu allem, was man trinkt oder einschenkt: Wasser, Saft oder Kaffee in der Bestell-App eines Cafés, die Milch für den Latte oder die Größe eines Smoothies. Auch für eine Trink-Tracker-App ist er eine schöne Idee. Ein flüssiger Radio-Button in CSS mit zweifarbigem Verlauf.
Die Welle bewegt sich weiter, solange die Option gewählt ist. Setz ihn also dort ein, wo nur wenige Optionen zu sehen sind. Nimm zwei Töne derselben Farbe für den Verlauf, dann wirkt es mehr wie echte Flüssigkeit.