HTML + CSSRadiobuttons

Radio-Button mit federndem Punkt

Der innere Punkt springt mit einem kleinen Federn aus der Mitte, sobald du eine Option wählst.

Einstellungen

16px
1x

Code

<div class="uv-rdd"><label><input type="radio" name="rdd" checked><span class="rb"><i></i></span>Täglich</label><label><input type="radio" name="rdd"><span class="rb"><i></i></span>Wöchentlich</label><label><input type="radio" name="rdd"><span class="rb"><i></i></span>Monatlich</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

Der klassische Radio-Button, nur etwas lebendiger. Gut für einfache Entscheidungen: wie oft der Newsletter kommen soll, täglich, wöchentlich oder monatlich, oder wie oft eine Fitness-App erinnert. Der Punkt federt an seinen Platz, und die neue Auswahl ist sofort klar. Ein animierter Radio-Button in CSS, den trotzdem jeder kennt.

Weil er einem normalen Radio-Button sehr ähnlich bleibt, ist er eine sichere Wahl für lange Formulare und Einstellungsseiten. Ordne die Optionen wie in der Demo untereinander an, wenn die Labels unterschiedlich lang sind.