HTML + CSSBoutons radio

Bouton radio à rebond

Le point intérieur surgit du centre avec un petit rebond quand on choisit une option.

Réglages

16px
1x

Code

<div class="uv-rdd"><label><input type="radio" name="rdd" checked><span class="rb"><i></i></span>Quotidien</label><label><input type="radio" name="rdd"><span class="rb"><i></i></span>Hebdo</label><label><input type="radio" name="rdd"><span class="rb"><i></i></span>Mensuel</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

Où l’utiliser

Le bouton radio classique, avec un peu plus de vie, pour les choix simples : à quelle fréquence recevoir la newsletter, chaque jour, chaque semaine ou chaque mois, ou le rythme des rappels d’une application de sport. Le point se place d’un bond et le nouveau choix saute aux yeux. Un bouton radio animé en CSS que tout le monde reconnaît.

Comme il reste proche d’un radio standard, c’est un choix sûr pour les longs formulaires et les pages de réglages. Empilez les options à la verticale, comme dans la démo, si les libellés n’ont pas la même longueur.