Radio mit springendem Punkt
Ein einziger Punkt springt von Option zu Option und dehnt sich unterwegs wie Wackelpudding.
Einstellungen
Code
<div class="uv-rdj"><span class="dt"></span><button class="on"><span class="sl"></span>Eins</button><button><span class="sl"></span>Zwei</button><button><span class="sl"></span>Drei</button><button><span class="sl"></span>Vier</button></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
Statt eines Punkts pro Option gibt es nur einen, der zwischen ihnen hin- und herspringt und sich dabei streckt. Diese verspielte Bewegung passt zu Quiz und kurzen Fragebögen: die Antworten in einem Trivia-Spiel, „Wie viele seid ihr im Team?“ beim Onboarding oder ein Persönlichkeitstest. Eine animierte Radio-Gruppe in HTML, CSS und etwas JavaScript.
Das Dehnen ist der ganze Reiz, also lass genug Abstand zwischen den Optionen, damit man den Sprung sieht. Ideal für eine senkrechte Liste mit bis zu fünf oder sechs Antworten; waagerecht geht der Effekt verloren.