Radio à anneau dessiné

Un anneau se trace autour de l’option choisie, puis le point central se remplit juste après.

Réglages

Couleur principale#0071e3

Couleur secondaire#8ec5ff

Taille16px

Vitesse1x

Code

index.html

<div class="uv-rdr"><label><input type="radio" name="rdr"><span class="rb"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10.5" pathLength="1"/></svg><i></i></span>Standard</label><label><input type="radio" name="rdr" checked><span class="rb"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10.5" pathLength="1"/></svg><i></i></span>Rapide</label><label><input type="radio" name="rdr"><span class="rb"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10.5" pathLength="1"/></svg><i></i></span>Urgent</label></div>

Prompt pour l’IA

Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.

Plus dans Boutons radio

Bouton radio à rebond

Boutons radioHTML + CSS

Sélecteur à pastille glissante

Boutons radioHTML + CSS

Cartes radio avec icône

Boutons radioHTML + CSS

Radio à point sauteur

Boutons radioHTML + CSS

Radio à remplissage liquide

Boutons radioHTML + CSS

Onglets verticaux lumineux

Boutons radioHTML + CSS

Sélecteur de formules

Boutons radioHTML + CSS

Note en étoiles avec libellé

Boutons radioHTML + CSS

Où l’utiliser

L’anneau qui entoure l’option rappelle une réponse cerclée au stylo, ce qui convient aux choix de rapidité ou de priorité : livraison standard, express ou urgente au moment du paiement, le délai d’un imprimeur en ligne ou la priorité d’un ticket d’assistance. Un bouton radio avec anneau SVG, en HTML et CSS.

Les deux temps, l’anneau puis le point, durent environ une demi-seconde. C’est parfait pour trois ou quatre options, mais un peu lent dans une longue liste. Indiquez le délai ou le prix à côté de chaque option pour faciliter le choix.