CSS bouton radio : 5 exemples de design moderne en 2026

Un bouton radio HTML par défaut ne sont pas franchement l’élément le plus élégant du web. Pourtant, avec quelques lignes de CSS bien pensées, vous pouvez transformer un simple choix d’option en interface moderne, fluide et agréable à utiliser. Design minimaliste, cartes interactives, boutons futuristes ou sélecteurs avec icônes : les possibilités sont bien plus larges qu’on l’imagine.

Dans ce tutoriel CSS, vous allez découvrir 5 exemples concrets de CSS bouton radio pour les styliser facilement, même si vous débutez. Vous apprendrez à personnaliser l’apparence de ces boutons radio, à créer des effets modernes et à comprendre les grandes techniques utilisées dans les interfaces professionnelles actuelles.

• Transformer un simple bouton radio HTML en élément moderne et interactif grâce à des techniques CSS utilisées dans les interfaces professionnelles.
• Comprendre comment créer des effets visuels élégants sans casser le fonctionnement natif des boutons radio ni compliquer votre code.
• S’inspirer de 5 styles totalement différents pour donner plus de personnalité, de clarté et de confort visuel à vos formulaires web.

Styliser un bouton radio en CSS peut sembler être un petit détail. Pourtant, dans une interface web, ce genre de détail change beaucoup de choses. Un simple choix entre “Option 1”, “Option 2” et “Option 3” peut devenir plus clair, plus agréable et plus professionnel grâce à quelques lignes de CSS bien pensées.

L’objectif n’est pas seulement de copier du code. Le but est surtout de comprendre la logique derrière chaque design. Pourquoi cache-t-on parfois le vrai bouton radio ? Pourquoi utilise-t-on un label ? Comment afficher un état sélectionné ? Comment rendre l’ensemble plus agréable sans perdre l’accessibilité ?

Installez-vous tranquillement : on va décortiquer tout cela ensemble.

Comprendre le bouton radio en HTML

Avant de parler design, il faut comprendre la base. Un bouton radio HTML sert à proposer plusieurs choix, mais un seul peut être sélectionné dans un même groupe.

Voici un exemple très simple :

<label>
    <input type="radio" name="niveau" checked>
    Débutant
</label>

<label>
    <input type="radio" name="niveau">
    Intermédiaire
</label>

<label>
    <input type="radio" name="niveau">
    Avancé
</label>

Le point important ici, c’est l’attribut name. Tous les boutons radio qui partagent le même name appartiennent au même groupe. Cela signifie que si vous cliquez sur “Intermédiaire”, le choix “Débutant” se désactive automatiquement.

C’est exactement ce comportement que l’on veut conserver, même lorsque l’on applique un style CSS beaucoup plus travaillé.

Pour chacun de nos exemples suivants, nous garderons le même code HTML :

<div class="radio-group style-1">
    <label class="radio-card">
        <input type="radio" name="minimal" checked>
        <span>Option 1</span>
    </label>

    <label class="radio-card">
        <input type="radio" name="minimal">
        <span>Option 2</span>
    </label>

    <label class="radio-card">
        <input type="radio" name="minimal">
        <span>Option 3</span>
    </label>
</div>

• Seule la classe style-1 changera en fonction de notre exemple de design.

Pourquoi styliser un bouton radio en CSS ?

Par défaut, un bouton radio est fonctionnel, mais rarement très séduisant. Il ressemble souvent à un petit rond gris, parfois difficile à voir, surtout dans une interface moderne.

Avec CSS, vous pouvez lui donner une vraie personnalité. Vous pouvez transformer ce petit rond en carte, en bouton, en capsule, en sélecteur de thème ou même en élément premium digne d’une application SaaS.

L’idée n’est pas de “tricher” avec le HTML. On garde le vrai bouton radio pour son fonctionnement, mais on améliore son apparence grâce au CSS.

Dans votre fichier, les cinq designs suivent tous cette logique : le bouton radio reste présent dans le code HTML, mais l’utilisateur voit surtout le label, la carte, l’icône ou la capsule stylisée.

La structure HTML de départ

Dans nos exemples, chaque option est placée dans un label. C’est une très bonne pratique, car cela rend toute la zone cliquable.

Au lieu de devoir cliquer précisément sur le petit rond du bouton radio, l’utilisateur peut cliquer sur toute la carte ou tout le bouton :

<label class="radio-card">
    <input type="radio" name="minimal" checked>
    <span>Option 1</span>
</label>

Ici, le label joue le rôle d’enveloppe. Il contient le vrai bouton radio et le texte visible.

Ensuite, le CSS peut cibler différents états, comme par exemple :

input[type="radio"]:checked + span {
    color: white;
}

Cette règle signifie : “quand le bouton radio est coché, applique un style au span placé juste après”.

C’est une technique très pratique pour afficher visuellement l’option sélectionnée.

Masquer le bouton radio natif

Dans plusieurs des exemples suivants, le bouton radio est masqué :

input[type="radio"] {
    display: none;
}

Cela permet de ne plus afficher le bouton radio standard du navigateur. À la place, on stylise le label.

Attention cependant : masquer totalement un champ avec display: none peut parfois poser des limites en accessibilité, notamment pour la navigation clavier. Une méthode plus accessible consiste souvent à rendre le bouton invisible avec opacity: 0, tout en le gardant présent dans la page :

input[type="radio"] {
    position: absolute;
    opacity: 0;
}

Ainsi, le bouton radio existe toujours, mais il ne gêne pas visuellement.

Exemple 1 : bouton radio CSS minimaliste

Le premier design de votre fichier s’inspire d’un style Apple : clair, doux, arrondi, moderne.

Le principe est simple : chaque option devient une petite carte. Le fond est blanc légèrement transparent, les bords sont arrondis, et une ombre subtile apparaît au survol.

Quand l’option est sélectionnée, le texte passe en blanc et un fond bleu apparaît derrière lui.

Ce design repose sur trois grandes idées :

D’abord, le bouton radio natif est masqué. Ensuite, le label devient une carte cliquable. Enfin, l’état :checked permet de modifier l’apparence de l’option active.

Voici le type de rendu que ce style cherche à obtenir :

.radio-card {
    padding: 16px 26px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.75);
    transition: 0.25s ease;
}

La propriété transition rend les changements plus doux. Sans elle, l’effet serait brutal : le bouton changerait d’état instantanément. Avec elle, l’interface semble plus fluide, plus naturelle.

C’est un détail, mais sur un site moderne, ce genre de détail donne une impression de qualité.

Ce style est parfait pour une interface sobre : formulaire d’inscription, choix de catégorie, préférence utilisateur, sélection de niveau ou filtre simple.

Le code CSS bouton radio complet

/* ========================= */
/* Style 1 :minimaliste      */
/* ========================= */

.style-1 {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}


/* Cache le vrai bouton radio */

.style-1 input[type="radio"] {
    display: none;
}


/* Carte */

.style-1 .radio-card {
    position: relative;

    padding: 16px 26px;

    background: rgba(255, 255, 255, 0.75);

    border: 1px solid rgba(15, 23, 42, 0.08);

    border-radius: 18px;

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    cursor: pointer;

    overflow: hidden;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}


/* Effet lumineux subtil */

.style-1 .radio-card::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, 0.8),
            rgba(255, 255, 255, 0));

    opacity: 0;

    transition: opacity 0.3s ease;
}


/* Texte */

.style-1 .radio-card span {
    position: relative;
    z-index: 2;

    font-size: 0.95rem;
    font-weight: 500;

    color: #1e293b;

    transition: color 0.25s ease;
}


/* Hover */

.style-1 .radio-card:hover {
    transform: translateY(-2px);

    border-color: rgba(59, 130, 246, 0.25);

    box-shadow:
        0 8px 20px rgba(15, 23, 42, 0.06),
        0 2px 6px rgba(15, 23, 42, 0.04);
}


.style-1 .radio-card:hover::before {
    opacity: 1;
}


/* Etat sélectionné */

.style-1 input[type="radio"]:checked+span {
    color: white;
}


.style-1 input[type="radio"]:checked+span::before {
    content: "";

    position: absolute;

    inset: -16px -26px;

    background:
        linear-gradient(135deg,
            #3b82f6,
            #2563eb);

    border-radius: 18px;

    z-index: -1;

    box-shadow:
        0 10px 25px rgba(37, 99, 235, 0.35),
        inset 0 1px 1px rgba(255, 255, 255, 0.25);
}


/* Animation légère */

.style-1 .radio-card:active {
    transform: scale(0.98);
}


/* Responsive */

@media (max-width: 768px) {

    .style-1 {
        flex-direction: column;
    }

    .style-1 .radio-card {
        width: 100%;
        text-align: center;
    }

}

Exemple 2 : bouton radio effet métal sombre

Le deuxième exemple change complètement d’ambiance. On quitte le style clair et minimaliste pour un design plus sombre, plus technique, presque industriel.

Ici, les options ressemblent à des boutons physiques. Le CSS utilise des dégradés, des ombres internes et des effets de relief pour créer une impression de profondeur.

Ce design repose surtout sur les propriétés suivantes :

background: linear-gradient(...);
box-shadow: inset 0 1px 0 rgba(...);
text-shadow: ...;

Le dégradé donne l’impression que la lumière arrive d’un certain angle. L’ombre interne donne un effet enfoncé ou bombé. Le text-shadow ajoute un côté gravé ou lumineux au texte.

Quand une option est sélectionnée, le bouton semble s’enfoncer. Le texte prend une couleur bleu néon, comme une petite LED allumée. C’est très visuel, presque ludique.

Ce type de bouton radio CSS convient bien à une interface sombre : tableau de bord, outil technique, application audio, panneau de configuration ou interface inspirée du gaming.

Il faut toutefois rester prudent. Un design très marqué attire beaucoup l’œil. Il est donc préférable de l’utiliser dans une interface cohérente, pas au milieu d’un site très doux et pastel. Sinon, l’utilisateur risque de se demander si un vaisseau spatial vient d’atterrir dans votre formulaire.

Le code CSS complet du bouton radio

/* Conteneur principal */
.style-2 {
    display: inline-flex;
    gap: 15px;
    background: linear-gradient(135deg, #2d3238 0%, #15181b 100%);
    padding: 12px;
    border-radius: 12px;
    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, 0.5),
        0 10px 20px rgba(0, 0, 0, 0.3);
}

/* Style de base du label (le bouton) */
.radio-button {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 8px;
    user-select: none;

    /* Effet métal brossé de base */
    background: linear-gradient(180deg, #555c64 0%, #33373b 50%, #222527 100%);
    border: 1px solid #1a1c1e;

    /* Ombres pour créer l'effet de relief (biseau) */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 4px 6px rgba(0, 0, 0, 0.4),
        0 1px 3px rgba(0, 0, 0, 0.4);

    transition: all 0.2s ease-in-out;
}

/* Masquer le bouton radio natif de manière accessible */
.radio-button input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Style du texte (métal gravé) */
.radio-button span {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
    color: #a0a5ac;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
    transition: all 0.2s ease;
    z-index: 2;
}

/* --- INTERACTIONS --- */

/* Au survol (effet de réflexion lumineuse légère) */
.radio-button:hover {
    background: linear-gradient(180deg, #616972 0%, #3a3f44 50%, #292d30 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 5px 8px rgba(0, 0, 0, 0.5);
}

.radio-button:hover span {
    color: #e0e5ec;
}

/* ÉTAT SÉLECTIONNÉ (Bouton enfoncé avec lueur) */
.radio-button:has(input:checked) {
    /* On inverse le gradient pour donner l'impression qu'il est enfoncé */
    background: linear-gradient(180deg, #1d2023 0%, #2a2e33 100%);
    border-color: #007acc;
    /* Bordure subtile de la couleur de la lueur */

    /* L'ombre s'inverse (devient intérieure pour l'enfoncement) */
    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, 0.7),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1),
        0 0 10px rgba(0, 122, 204, 0.3);
    /* Légère lueur globale */
}

/* Changement de couleur du texte + effet "néon/LED" bleuté de la gravure */
.radio-button input:checked+span {
    color: #00f0ff;
    text-shadow:
        0 0 4px rgba(0, 240, 255, 0.6),
        0 0 10px rgba(0, 240, 255, 0.4),
        0 -1px 0 rgba(0, 0, 0, 0.9);
}

/* Effet de clic physique (Active) */
.radio-button:active {
    transform: scale(0.98);
}

Exemple 3 : cartes sélectionnables premium

Le troisième exemple transforme les boutons radio en cartes de choix. C’est une technique très utilisée pour les pages de tarifs, les offres d’abonnement ou les choix de formule.

Au lieu d’avoir simplement “Option 1”, “Option 2”, “Option 3”, chaque choix devient une vraie carte avec un titre et une description :

<label class="radio-plan">
    <input type="radio" name="plan" checked>

    <div class="content">
        <h3>Basique</h3>
        <p>Parfait pour débuter</p>
    </div>
</label>

Ce format est très intéressant, car il permet d’ajouter du contexte. L’utilisateur ne choisit plus seulement un mot, mais une proposition claire.

Le CSS utilise une grille :

grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

Cette ligne permet d’obtenir un affichage flexible. Les cartes s’adaptent à la largeur disponible. Sur grand écran, elles peuvent s’aligner en colonnes. Sur mobile, elles peuvent passer les unes sous les autres.

Le design ajoute aussi un petit rond en haut à droite, qui rappelle visuellement le bouton radio classique. C’est malin, car même si le bouton natif est caché, l’utilisateur comprend qu’il s’agit d’un choix unique.

L’état sélectionné change la couleur du titre, la bordure et l’ambiance générale de la carte. Cela rend le choix actif immédiatement visible.

Ce design est l’un des plus utiles en pratique. Vous pouvez l’utiliser pour choisir un abonnement, un type de livraison, un niveau de difficulté, une méthode de paiement ou une configuration de produit.

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

Le code HTML + CSS complet

<div class="radio-group style-3">
    <label class="radio-plan">
        <input type="radio" name="plan" checked>

        <div class="content">
            <h3>Basique</h3>
            <p>Parfait pour débuter</p>
        </div>
    </label>

    <label class="radio-plan">
        <input type="radio" name="plan">

        <div class="content">
            <h3>Pro</h3>
            <p>Pour les projets avancés</p>
        </div>
    </label>

    <label class="radio-plan">
        <input type="radio" name="plan">

        <div class="content">
            <h3>Premium</h3>
            <p>Toutes les fonctionnalités</p>
        </div>
    </label>
</div>

.style-3 {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(220px, 1fr));

    gap: 20px;
}


/* Cache le vrai radio */

.style-3 input[type="radio"] {
    display: none;
}


/* Carte */

.style-3 .radio-plan {
    position: relative;

    display: block;

    padding: 30px;

    background: #ffffff;

    border-radius: 24px;

    border: 2px solid #edf1f7;

    overflow: hidden;

    cursor: pointer;

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        background 0.35s ease;
}


/* Halo décoratif */

.style-3 .radio-plan::before {
    content: "";

    position: absolute;

    top: -80px;
    right: -80px;

    width: 180px;
    height: 180px;

    background:
        radial-gradient(circle,
            rgba(99, 102, 241, 0.12),
            transparent 70%);

    transition: 0.4s ease;
}


/* Petit badge rond */

.style-3 .radio-plan::after {
    content: "";

    position: absolute;

    top: 22px;
    right: 22px;

    width: 18px;
    height: 18px;

    border-radius: 50%;

    border: 2px solid #cbd5e1;

    background: white;

    transition: 0.3s ease;
}


/* Contenu */

.style-3 .content {
    position: relative;
    z-index: 2;
}


/* Titre */

.style-3 h3 {
    font-size: 1.4rem;
    font-weight: 700;

    color: #0f172a;

    margin-bottom: 10px;

    transition: 0.3s ease;
}


/* Texte */

.style-3 p {
    color: #64748b;

    font-size: 0.95rem;

    line-height: 1.5;

    transition: 0.3s ease;
}


/* Hover */

.style-3 .radio-plan:hover {
    transform: translateY(-6px);

    border-color: #c7d2fe;

    box-shadow:
        0 12px 30px rgba(15, 23, 42, 0.08),
        0 4px 10px rgba(15, 23, 42, 0.04);
}


.style-3 .radio-plan:hover::before {
    transform: scale(1.15);
}


/* Etat actif */

.style-3 input[type="radio"]:checked~.content h3 {
    color: #4338ca;
}


.style-3 input[type="radio"]:checked~.content p {
    color: #475569;
}


/* Carte sélectionnée */

.style-3 input[type="radio"]:checked~.content {
    position: relative;
}


.style-3 input[type="radio"]:checked~.content::before {
    content: "";

    position: absolute;

    inset: -90px;

    border-radius: 24px;

    background:
        linear-gradient(135deg,
            rgba(99, 102, 241, 0.06),
            rgba(168, 85, 247, 0.06));

    z-index: -1;
}


/* Bordure active */

.style-3 input[type="radio"]:checked+.content,
.style-3 .radio-plan:has(input[type="radio"]:checked) {
    border-color: #818cf8;
}


/* Rond sélectionné */

.style-3 .radio-plan:has(input[type="radio"]:checked)::after {
    background: #4f46e5;

    border-color: #4f46e5;

    box-shadow:
        0 0 0 5px rgba(79, 70, 229, 0.12);
}


/* Animation clic */

.style-3 .radio-plan:active {
    transform: scale(0.98);
}


/* Responsive */

@media (max-width: 768px) {

    .style-3 {
        grid-template-columns: 1fr;
    }

}

Exemple 4 : sélecteur avec icônes

Le quatrième exemple apporte une dimension plus visuelle. Chaque choix contient une icône, puis un texte : clair, sombre, système.

Ce genre de bouton radio CSS est très efficace quand les options sont faciles à représenter visuellement. Une icône de soleil pour le thème clair, une lune pour le thème sombre, un ordinateur pour le mode système : l’utilisateur comprend presque avant même de lire.

Le HTML reste simple :

<label class="radio-icon">
    <input type="radio" name="theme" checked>
    <span class="icon">🌞</span>
    <span>Clair</span>
</label>

Le CSS donne ensuite une apparence de tuile sombre, avec un halo lumineux, une icône dans un carré arrondi et une animation au survol.

La grande idée de ce design est de créer une hiérarchie visuelle. L’icône attire l’œil, puis le texte confirme le choix. C’est excellent pour améliorer la compréhension rapide.

Quand l’option est sélectionnée, le fond devient plus intense, la bordure se colore et l’icône prend un dégradé bleu/violet. L’utilisateur voit clairement ce qui est actif.

Ce design convient très bien aux préférences d’interface : thème clair ou sombre, type d’affichage, choix d’appareil, mode de lecture, niveau de confort visuel.

Un petit conseil : utilisez les icônes avec modération. Si chaque élément de votre formulaire clignote, brille ou danse la salsa, l’utilisateur risque de fatiguer. Une interface agréable, c’est souvent une interface qui sait rester calme.

Code HTML + CSS complet pour le bouton radio

<div class="radio-group style-4">
    <label class="radio-icon">
        <input type="radio" name="theme" checked>
        <span class="icon">🌞</span>
        <span>Clair</span>
    </label>

    <label class="radio-icon">
        <input type="radio" name="theme">
        <span class="icon">🌙</span>
        <span>Sombre</span>
    </label>

    <label class="radio-icon">
        <input type="radio" name="theme">
        <span class="icon">💻</span>
        <span>Système</span>
    </label>
</div>

.style-4 {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}


/* Cache le bouton radio natif */

.style-4 input[type="radio"] {
    display: none;
}


/* Bouton */

.style-4 .radio-icon {
    position: relative;

    min-width: 140px;
    padding: 22px 24px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

    background: #0f172a;
    color: #e5e7eb;

    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.08);

    cursor: pointer;
    overflow: hidden;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 18px 35px rgba(15, 23, 42, 0.18);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


/* Halo lumineux */

.style-4 .radio-icon::before {
    content: "";

    position: absolute;
    inset: -40%;

    background:
        radial-gradient(circle at top,
            rgba(255, 255, 255, 0.18),
            transparent 45%);

    opacity: 0;
    transition: opacity 0.35s ease;
}


/* Liseré animé */

.style-4 .radio-icon::after {
    content: "";

    position: absolute;
    inset: 0;

    border-radius: inherit;
    padding: 1px;

    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.35),
            rgba(255, 255, 255, 0.04),
            rgba(255, 255, 255, 0.22));

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;
    mask-composite: exclude;

    opacity: 0;
    transition: opacity 0.35s ease;
}


/* Icône */

.style-4 .icon {
    position: relative;
    z-index: 2;

    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 1.8rem;

    background: rgba(255, 255, 255, 0.08);
    border-radius: 18px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}


/* Texte */

.style-4 .radio-icon span:not(.icon) {
    position: relative;
    z-index: 2;

    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;

    color: #cbd5e1;

    transition: color 0.3s ease;
}


/* Survol */

.style-4 .radio-icon:hover {
    transform: translateY(-5px);

    border-color: rgba(255, 255, 255, 0.18);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 24px 45px rgba(15, 23, 42, 0.24);
}


.style-4 .radio-icon:hover::before,
.style-4 .radio-icon:hover::after {
    opacity: 1;
}


.style-4 .radio-icon:hover .icon {
    transform: scale(1.08) rotate(-3deg);
    background: rgba(255, 255, 255, 0.13);
}


/* État sélectionné */

.style-4 .radio-icon:has(input[type="radio"]:checked) {
    background:
        linear-gradient(145deg,
            #111827,
            #020617);

    border-color: rgba(56, 189, 248, 0.45);

    box-shadow:
        0 0 0 4px rgba(56, 189, 248, 0.12),
        0 22px 45px rgba(2, 6, 23, 0.35);
}


.style-4 .radio-icon:has(input[type="radio"]:checked)::before,
.style-4 .radio-icon:has(input[type="radio"]:checked)::after {
    opacity: 1;
}


.style-4 .radio-icon:has(input[type="radio"]:checked) .icon {
    background:
        linear-gradient(135deg,
            #38bdf8,
            #818cf8);

    transform: translateY(-2px) scale(1.08);

    box-shadow:
        0 12px 25px rgba(56, 189, 248, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}


.style-4 .radio-icon:has(input[type="radio"]:checked) span:not(.icon) {
    color: #ffffff;
}


/* Clic */

.style-4 .radio-icon:active {
    transform: scale(0.97);
}


/* Accessibilité clavier */

.style-4 .radio-icon:has(input[type="radio"]:focus-visible) {
    outline: 3px solid rgba(56, 189, 248, 0.35);
    outline-offset: 4px;
}


/* Responsive */

@media (max-width: 768px) {

    .style-4 {
        display: grid;
        grid-template-columns: 1fr;
    }

    .style-4 .radio-icon {
        width: 100%;
    }

}

Exemple 5 : toggle futuriste

Le cinquième exemple est différent, car il ne propose que deux choix : mensuel ou annuel.

Visuellement, il ressemble davantage à un interrupteur ou à un sélecteur segmenté qu’à un bouton radio classique.

Ce design est très adapté lorsque l’utilisateur doit choisir entre deux options opposées ou complémentaires : mensuel/annuel, oui/non, public/privé, simple/avancé.

La structure HTML reste basée sur des boutons radio :

<label class="radio-toggle">
    <input type="radio" name="switch" checked>
    <span>Mensuel</span>
</label>

Mais le CSS transforme l’ensemble en capsule arrondie :

border-radius: 999px;

Cette valeur très élevée permet d’obtenir une forme parfaitement arrondie, comme une pilule.

L’option sélectionnée affiche une capsule claire à l’intérieur du fond sombre. L’animation donne l’impression que le choix s’active doucement, sans mouvement excessif.

C’est un design plus expérimental, mais très intéressant pour des interfaces modernes. Il donne une impression de fluidité et de dynamisme.

Le point important, ici, est de garder une bonne lisibilité. Les effets visuels ne doivent jamais empêcher l’utilisateur de comprendre rapidement quelle option est sélectionnée.

Le code CSS bouton radio

.style-5 {
    position: relative;

    display: inline-grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 8px;

    padding: 8px;

    border-radius: 999px;

    background:
        linear-gradient(145deg,
            #0f172a,
            #020617);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 20px 40px rgba(15, 23, 42, 0.22);

    overflow: hidden;
}


/* Texture légère */

.style-5::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at top left,
            rgba(255, 255, 255, 0.06),
            transparent 40%);

    pointer-events: none;
}


/* Cache les radios */

.style-5 input[type="radio"] {
    display: none;
}


/* Boutons */

.style-5 .radio-toggle {
    position: relative;

    z-index: 2;

    padding: 15px 30px;

    border-radius: 999px;

    cursor: pointer;

    overflow: hidden;

    transition:
        transform 0.25s ease,
        color 0.3s ease;
}


/* Texte */

.style-5 .radio-toggle span {
    position: relative;
    z-index: 5;

    font-size: 0.92rem;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.05em;

    color: #94a3b8;

    transition:
        color 0.35s ease,
        transform 0.35s ease;
}


/* Capsule animée */

.style-5 .radio-toggle::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.95),
            rgba(226, 232, 240, 0.92));

    transform:
        scale(0.7) translateY(12px);

    opacity: 0;

    filter: blur(12px);

    transition:
        transform 0.45s cubic-bezier(.16, 1, .3, 1),
        opacity 0.35s ease,
        filter 0.45s ease;
}


/* Glow interne */

.style-5 .radio-toggle::after {
    content: "";

    position: absolute;

    inset: 1px;

    border-radius: inherit;

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.45),
            rgba(255, 255, 255, 0));

    opacity: 0;

    transition: opacity 0.35s ease;
}


/* Hover */

.style-5 .radio-toggle:hover span {
    color: #e2e8f0;
}


/* ========================= */
/* Etat sélectionné */
/* ========================= */

.style-5 .radio-toggle:has(input[type="radio"]:checked)::before {
    opacity: 1;

    filter: blur(0);

    transform:
        scale(1) translateY(0);
}


.style-5 .radio-toggle:has(input[type="radio"]:checked)::after {
    opacity: 1;
}


/* Texte actif */

.style-5 .radio-toggle:has(input[type="radio"]:checked) span {
    color: #020617;

    transform: scale(1.03);
}


/* Animation fluide au clic */

.style-5 .radio-toggle:has(input[type="radio"]:checked) {
    animation: pulse-select 0.5s ease;
}


/* Hover actif */

.style-5 .radio-toggle:has(input[type="radio"]:checked):hover {
    transform: translateY(-1px);
}


/* Effet pression */

.style-5 .radio-toggle:active {
    transform: scale(0.96);
}


/* Focus clavier */

.style-5 .radio-toggle:has(input[type="radio"]:focus-visible) {
    outline: 3px solid rgba(255, 255, 255, 0.15);
    outline-offset: 4px;
}


/* ========================= */
/* Animation sélection */
/* ========================= */

@keyframes pulse-select {

    0% {
        transform: scale(0.96);
    }

    50% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1);
    }

}


/* ========================= */
/* Responsive */
/* ========================= */

@media (max-width: 768px) {

    .style-5 {
        width: 100%;
    }

    .style-5 .radio-toggle {
        text-align: center;
        padding: 14px 20px;
    }

}

Le rôle de la pseudo-classe :checked

Dans tous ces exemples, la pseudo-classe :checked est essentielle.

Elle permet de dire au CSS : “applique ce style uniquement si le bouton radio est sélectionné” :

input[type="radio"]:checked + span {
    color: white;
}

Ou encore :

.radio-icon:has(input[type="radio"]:checked) {
    border-color: rgba(56, 189, 248, 0.45);
}

La pseudo-classe :has() est très puissante. Elle permet de styliser un parent selon ce qu’il contient. En clair, vous pouvez dire : “si ce label contient un bouton radio coché, alors change le style du label”.

C’est très pratique pour les cartes, les boutons ou les tuiles.

Attention tout de même : :has() est aujourd’hui bien supportée par les navigateurs modernes, mais si vous devez gérer de très vieux navigateurs, il faudra vérifier la compatibilité.

👉 Tout savoir sur La pseudo-classe :has en CSS

Ajouter des transitions pour un rendu plus naturel

Une interface sans transition peut sembler sèche. Lorsque vous cliquez, tout change d’un coup. Ce n’est pas dramatique, mais ce n’est pas très agréable.

Avec CSS, vous pouvez adoucir ces changements :

transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;

Cela signifie que la transformation, l’ombre et le fond vont évoluer progressivement.

Le résultat est plus moderne. L’utilisateur sent que l’interface réagit à son action.

Il ne faut pas forcément animer tout et n’importe quoi. Une petite transition bien placée suffit souvent à donner de la vie à un formulaire.

👉 Aller plus loin avec La propriété transition en CSS

Penser au responsive

Votre fichier prévoit aussi des règles responsive avec @media.

C’est indispensable, car un groupe de boutons radio peut très bien fonctionner sur ordinateur, mais devenir trop serré sur mobile :

@media (max-width: 768px) {
    .radio-group {
        flex-direction: column;
    }
}

Ici, lorsque l’écran devient plus petit, les options passent en colonne. Cela évite que les boutons soient trop comprimés.

Sur mobile, il faut penser avec les doigts. Une option doit être assez grande pour être touchée facilement. Les cartes, les boutons larges et les espacements généreux sont donc vos amis.

👉 Les media queries en CSS

Accessibilité : ne sacrifiez pas l’usage au design

Quand on stylise un bouton radio en CSS, on peut vite se laisser emporter par le visuel. Pourtant, un formulaire doit rester utilisable.

Quelques bonnes pratiques sont importantes :

• Gardez une structure HTML logique avec de vrais input type="radio".
• Utilisez des label pour rendre les zones cliquables.
• Prévoyez un style visible pour le focus clavier avec :focus-visible.
• Assurez un contraste suffisant entre le texte et le fond.
• Ne basez pas toute la compréhension uniquement sur la couleur.

Par exemple, ce type de règle améliore la navigation clavier :

.radio-icon:has(input[type="radio"]:focus-visible) {
    outline: 3px solid rgba(56, 189, 248, 0.35);
    outline-offset: 4px;
}

Grâce à cela, une personne qui navigue au clavier peut voir où elle se trouve dans le formulaire.

Un beau design, c’est bien. Un beau design utilisable, c’est mieux.

Comment choisir le bon style ?

Le meilleur design dépend du contexte.

• Pour un formulaire simple, le style minimaliste est souvent parfait. Il reste discret, élégant et facile à comprendre.
• Pour une interface sombre ou technique, le style métal peut donner une vraie personnalité.
• Pour une page de tarifs ou une sélection d’offre, les cartes premium sont probablement le meilleur choix.
• Pour des préférences utilisateur, le sélecteur avec icônes fonctionne très bien.
• Pour deux options seulement, le toggle futuriste est clair, compact et moderne.

La vraie question à se poser est toujours la même : est-ce que ce style aide l’utilisateur à choisir plus facilement ?

• Si la réponse est oui, vous êtes sur la bonne voie.

---

FAQ : Styliser un bouton radio en CSS

---

Styliser un bouton radio en CSS n’est pas seulement une affaire de décoration. C’est une manière d’améliorer l’expérience utilisateur, de rendre un formulaire plus clair et de donner plus de caractère à une interface.

Avec les cinq exemples vus dans ce tutoriel, vous avez plusieurs pistes concrètes : un design minimaliste, un bouton sombre à effet physique, des cartes sélectionnables, un choix avec icônes et un toggle moderne.

Le plus intéressant maintenant, c’est de pratiquer. Reprenez ces exemples, modifiez les couleurs, changez les textes, testez d’autres tailles, ajoutez vos propres transitions. C’est en expérimentant que vous allez vraiment comprendre comment fonctionne un bouton radio CSS personnalisé.

Et surtout, gardez cette idée en tête : un bon design ne doit pas seulement être joli. Il doit guider l’utilisateur, rendre le choix évident et donner envie d’interagir avec votre page.