AIMRAN
HTML + CSSBoutons radio

Radio à point sauteur

Un seul point saute d’une option à l’autre et s’étire comme de la gelée pendant le trajet.

Réglages

16px
1x

Code

<div class="uv-rdj"><span class="dt"></span><button class="on"><span class="sl"></span>Un</button><button><span class="sl"></span>Deux</button><button><span class="sl"></span>Trois</button><button><span class="sl"></span>Quatre</button></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.

Version Markdown avec tout le code, pour les assistants IA

Plus dans Boutons radio

Voir tout : Boutons radio

Bouton radio à rebond

Boutons radioHTML + CSS

Radio à anneau dessiné

Boutons radioHTML + CSS

Sélecteur à pastille glissante

Boutons radioHTML + CSS

Cartes radio avec icône

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

Au lieu d’un point par option, un seul point voyage entre elles et s’étire en chemin. Ce mouvement ludique convient aux quiz et aux questionnaires courts : les réponses d’un jeu de culture générale, le « Combien êtes-vous dans l’équipe ? » d’un onboarding ou un test de personnalité. Un groupe radio animé en HTML, CSS et un peu de JavaScript.

L’étirement fait tout le charme : laissez assez d’espace entre les options pour que le saut se voie. Il fonctionne bien dans une liste verticale de cinq ou six réponses au plus ; à l’horizontale, l’effet se perd.