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.

Plus dans Boutons radio

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.