AIMRAN
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.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

Mehr aus Radiobuttons

Alle ansehen: Radiobuttons

Radio mit gezeichnetem Ring

RadiobuttonsHTML + CSS

Umschalter mit gleitender Pille

RadiobuttonsHTML + CSS

Radio-Karten mit Icon

RadiobuttonsHTML + CSS

Radio mit springendem Punkt

RadiobuttonsHTML + CSS

Radio mit Flüssigkeitsfüllung

RadiobuttonsHTML + CSS

Vertikale Tabs mit Leuchtbalken

RadiobuttonsHTML + CSS

Auswahl für Tarife

RadiobuttonsHTML + CSS

Sternebewertung mit Text

RadiobuttonsHTML + CSS

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.