Radio-Buttons im Neon-Look

Die aktive Option leuchtet mit einem Neonring, und ihr Label nimmt dieselbe Farbe an.

Einstellungen

Hauptfarbe#0071e3

Zweitfarbe#8ec5ff

Größe16px

Tempo1x

Code

index.html

<div class="uv-rdn"><label><input type="radio" name="rdn" checked><span class="rb"><i></i></span>Niedrig</label><label><input type="radio" name="rdn"><span class="rb"><i></i></span>Mittel</label><label><input type="radio" name="rdn"><span class="rb"><i></i></span>Hoch</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-Button mit federndem Punkt

RadiobuttonsHTML + CSS

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

Wofür du ihn nutzen kannst

Leuchtende Radio-Buttons passen auf dunkle Screens, wo die Einstellung selbst etwas Energie hat: der Schwierigkeitsgrad eines Browserspiels, die Helligkeit in einer Smart-Home-App oder die Schärfe auf einer Lieferseite für den späten Hunger. Niedrig, mittel oder hoch, die leuchtende Option ist sofort klar. Neon-Radio-Buttons in CSS, die auch das Label einfärben.

Sie passen gut zur Neon-Checkbox aus derselben Sammlung, falls du beides in einem Panel brauchst. Lass das Leuchten aber nur beim aktiven Zustand; wenn alles strahlt, fällt nichts mehr auf.