La propriété CSS letter-spacing pour animer une Checkbox

Une simple case à cocher peut transformer l’expérience utilisateur lorsqu’elle est accompagnée d’une animation élégante. Dans ce tutoriel, vous allez apprendre à créer une animation checkbox moderne en HTML et CSS, sans JavaScript, en exploitant la propriété CSS letter-spacing.

Pas à pas, nous verrons comment faire disparaître un texte pour en faire apparaître un autre avec une animation fluide et originale. Que vous soyez débutant en CSS ou simplement curieux de découvrir une nouvelle technique d’animation avec letter-spacing, vous repartirez avec un composant à la fois esthétique, performant et facile à réutiliser dans vos propres projets web.

• Transformer une case à cocher ou checkbox en élément interactif moderne capable de renforcer immédiatement l’expérience utilisateur.
• Maîtriser une utilisation originale de letter-spacing pour créer des effets visuels fluides et élégants sans dépendre de JavaScript.
• Reproduire facilement une animation inspirée des interfaces professionnelles et réutilisable dans vos formulaires, applications et projets web.

Créer une interface agréable à utiliser ne passe pas uniquement par les couleurs ou les typographies. Les petites animations jouent également un rôle essentiel dans l’expérience utilisateur. Une simple case à cocher peut devenir beaucoup plus vivante lorsqu’elle réagit élégamment aux actions de l’utilisateur.

Au lieu d’afficher brutalement un nouveau texte lorsqu’une case est cochée, nous allons utiliser la propriété letter-spacing pour créer un effet visuel fluide. Les lettres semblent disparaître progressivement avant que le nouveau message n’apparaisse de façon naturelle.

Vous apprendrez à construire une checkbox personnalisée, à masquer l’élément HTML natif, à créer une coche animée et surtout à exploiter l’animation letter-spacing pour obtenir un rendu moderne digne des interfaces professionnelles.

Voici le résultat :

Pourquoi animer une checkbox ?

Lorsque l’on débute en HTML et CSS, une case à cocher est souvent considérée comme un simple élément de formulaire. Pourtant, elle constitue un excellent terrain d’expérimentation pour apprendre les animations CSS.

Prenons un exemple concret.

Imaginez un bouton d’inscription à une newsletter. Lorsque l’utilisateur coche la case « Rejoindre le club », il est plus agréable d’afficher un message comme « Bienvenue à bord » avec une petite animation plutôt qu’un changement instantané.

Cette approche apporte plusieurs avantages :

• elle attire naturellement l’œil
• elle confirme visuellement l’action réalisée
• elle améliore l’expérience utilisateur
• elle donne un aspect plus professionnel à l’interface.

Et rassurez-vous : même si le résultat paraît sophistiqué, la technique utilisée reste accessible aux débutants.

👉 Tout savoir sur la propriété animation en CSS

Aperçu du résultat final

Notre animation va suivre ce déroulement :

Au départ, le texte affiche :

Rejoindre le club

Lorsque la checkbox est cochée :

• la case devient bleue
• une coche apparaît
• les lettres du premier texte se resserrent progressivement
• le texte disparaît
• un nouveau texte apparaît :

Bienvenue à bord

L’effet produit une sensation de transformation particulièrement agréable.

Comprendre la propriété letter-spacing

Avant d’écrire la moindre ligne de code, il est important de comprendre le cœur de cette animation.

La propriété CSS letter-spacing permet de modifier l’espacement entre les lettres.

Par exemple :

p {
    letter-spacing: 5px;
}

Le texte devient alors plus aéré.

À l’inverse :

p {
    letter-spacing: -2px;
}

Les lettres se rapprochent.

Cette simple propriété ouvre la porte à des animations étonnantes.

Prenons cet exemple :

p {
    transition: letter-spacing .5s ease;
}

p:hover {
    letter-spacing: 10px;
}

Lorsque la souris passe sur le texte, les lettres s’écartent progressivement.

• Notre checkbox va exploiter exactement le même principe, mais dans le sens inverse.

Les lettres vont se resserrer jusqu’à devenir quasiment invisibles.

Structure HTML de la checkbox

Commençons par le HTML.

<div class="checkbox-wrapper">

    <input type="checkbox" id="club">

    <label for="club">

        <span class="checkbox-box"></span>

        <span class="checkbox-text">
            <span>Rejoindre le club</span>
            <span>Bienvenue à bord</span>
        </span>

    </label>

</div>

Observons chaque élément.

Le conteneur principal :

<div class="checkbox-wrapper">

Il sert simplement à regrouper tous les éléments.

Ensuite :

<input type="checkbox" id="club">h

Il s’agit de la véritable checkbox.

Même si nous allons la masquer visuellement, elle reste indispensable pour conserver le fonctionnement normal du formulaire.

Le label :

<label for="club">

Grâce à l’attribut for, un clic sur le texte ou sur la case activera automatiquement la checkbox.

C’est une excellente pratique pour l’accessibilité.

Masquer la checkbox native

Les cases à cocher proposées par les navigateurs sont pratiques mais souvent limitées graphiquement.

👉 5 Exemples de checkbox stylisées en CSS

Nous allons donc les cacher.

.checkbox-wrapper input {
    position: absolute;
    opacity: 0;
}

L’élément existe toujours.

• Il reste fonctionnel.
• Il peut toujours recevoir le focus clavier.
• Mais il devient invisible.

Cette technique est largement utilisée dans le développement moderne.

Créer la case personnalisée

Maintenant que la vraie checkbox est masquée, nous pouvons dessiner la nôtre.

.checkbox-box {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: white;
}

Ici :

• largeur de 24 pixels ;
• hauteur de 24 pixels ;
• coins arrondis ;
• fond blanc.

Ajoutons une ombre légère.

.checkbox-box {
    box-shadow:
        inset 0 0 0 1.5px rgba(0,0,0,.18),
        0 2px 8px rgba(0,0,0,.06);
}

Le résultat devient immédiatement plus moderne.

Dessiner la coche

Aucun caractère spécial n’est utilisé.

La coche est dessinée grâce aux bordures CSS.

.checkbox-box::after {
    content: "";
    position: absolute;
}

Puis :

width: 7px;
height: 12px;
border: solid white;
border-width: 0 2.5px 2.5px 0;

Enfin :

transform: rotate(45deg);

Cette rotation transforme les bordures en symbole de validation.

• C’est une astuce très utilisée dans le développement front-end.

Préparer l’animation de la coche

Au départ, la coche doit être invisible.

opacity: 0;
transform: rotate(45deg) scale(0);

Le scale(0) réduit totalement l’élément.

Lorsque la checkbox est cochée :

opacity: 1;
transform: rotate(45deg) scale(1);

L’effet donne l’impression que la coche apparaît progressivement.

Préparer les textes

Nous avons deux messages.

Le premier :

<span>Rejoindre le club</span>

Le second :

<span>Bienvenue à bord</span>

Ils sont placés exactement au même endroit.

.checkbox-text span {
    position: absolute;
    left: 0;
}

Ainsi, un seul texte est visible à la fois.

Afficher le premier texte

Par défaut :

.checkbox-text span:first-child {
    opacity: 1;
}

Le premier message est visible.

Le second est caché.

.checkbox-text span:last-child {
    opacity: 0;
}

Jusque-là, rien de compliqué.

Le secret de l’animation letter-spacing

C’est maintenant que la magie opère.

Pour le premier texte :

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 ?

letter-spacing: 0ch;

L’espacement est normal.

Lorsque la case est cochée :

letter-spacing: -1.4ch;

Les lettres se rapprochent fortement. Visuellement, elles semblent se contracter. Comme un accordéon que l’on referme progressivement.

• C’est cet effet qui donne toute son originalité à l’animation.

Pourquoi utiliser une valeur en ch ?

Vous remarquerez l’utilisation de :

-1.4ch

au lieu de :

-10px

L’unité ch correspond approximativement à la largeur du caractère « 0 ».

Elle s’adapte mieux au texte.

L’animation reste ainsi plus cohérente quelle que soit la police utilisée.

👉 En savoir plus sur Les différentes unités CSS

Ajouter text-indent

Pour renforcer l’effet visuel, le code utilise également :

text-indent: -1ch;

Cette propriété décale légèrement le texte. Et, associée au letter-spacing négatif, elle accentue l’impression de disparition.

Les lettres semblent être aspirées vers la gauche.

Faire apparaître le second texte

Le deuxième message démarre dans cet état :

letter-spacing: -1ch;
opacity: 0;

Puis :

letter-spacing: 0ch;
opacity: 1;

Cette fois-ci, les lettres s’écartent progressivement pour retrouver leur position normale.

• L’effet inverse se produit.

Le texte semble se reconstruire sous les yeux de l’utilisateur.

Synchroniser les animations

Sans synchronisation, les deux textes apparaîtraient simultanément… Le résultat serait brouillon.

Nous ajoutons donc :

transition-delay: .22s;

Le second texte attend un court instant avant de démarrer.

Pendant ce temps :

• le premier disparaît ;
• le second arrive ensuite.

La transition devient beaucoup plus naturelle.

Déclencher l’animation avec :checked

Toute la logique repose sur ce sélecteur :

input:checked + label

Traduction :

« Lorsque l’input est coché, applique les styles au label placé juste après. »

Exemple :

input:checked + label .checkbox-box {
    background: #0071e3;
}

La case devient bleue.

Même principe pour le texte :

input:checked + label .checkbox-text span:first-child {
    opacity: 0;
}

Puis :

input:checked + label .checkbox-text span:last-child {
    opacity: 1;
}

Toute l’animation est pilotée sans JavaScript. Uniquement grâce au CSS.

Ajouter des transitions fluides

Sans transition :

opacity: 0;

Le changement serait instantané.

Avec :

transition: opacity .25s ease;

L’élément disparaît progressivement.

Même logique pour :

transition: letter-spacing .45s ease;

Les lettres se déplacent de façon fluide.

C’est précisément ce qui transforme un simple changement d’état en véritable animation checkbox.

👉 Tout savoir sur la propriété transition en CSS.

Améliorer l’accessibilité

Un bon développeur ne pense pas uniquement à l’esthétique. Il pense aussi aux utilisateurs qui naviguent au clavier.

Le code prévoit :

input:focus-visible + label .checkbox-box

Lorsque l’utilisateur utilise la touche Tab, un contour apparaît autour de la case. Cela lui permet de savoir exactement quel élément est sélectionné.

Cette petite attention fait une grande différence.

Personnaliser votre animation

Une fois le principe compris, les possibilités deviennent nombreuses.

Vous pouvez modifier :

La couleur :

background: #ff3366;

La vitesse :

transition: .8s;

Le texte :

<span>S'abonner</span>
<span>Merci pour votre confiance</span>

Ou encore créer plusieurs niveaux d’animation.

Par exemple :

letter-spacing: -2ch;

pour un effet encore plus spectaculaire.

Attention toutefois à ne pas exagérer. Une animation réussie doit accompagner l’utilisateur, pas lui donner l’impression que son écran est en train de fondre.

Quand utiliser cette technique ?

Cette animation est particulièrement adaptée :

• aux formulaires modernes (8 Exemples de formulaire responsive)
• aux interfaces d’inscription
• aux systèmes de validation
• aux tableaux de bord
• aux applications web

Elle apporte une touche d’originalité tout en restant légère et performante.

Comme tout est géré par le CSS, les performances restent excellentes même sur mobile.

Aller encore plus loin

Maintenant que vous maîtrisez l’animation checkbox basée sur letter-spacing, vous pouvez expérimenter d’autres propriétés CSS :

• transform
• scale
• rotate
• blur
• filter
• clip-path

Certaines combinaisons permettent de créer des effets particulièrement impressionnants sans écrire une seule ligne de JavaScript.

L’important est d’avancer progressivement.

Comprenez d’abord chaque propriété individuellement, puis amusez-vous à les combiner.

Le code HTML et CSS complet

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkbox animée avec letter-spacing</title>

<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.demoLetter {
    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f5f5f7;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
}

.checkbox-wrapper {
    position: relative;
}

.checkbox-wrapper input {
    position: absolute;
    opacity: 0;
}

.checkbox-wrapper label {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    user-select: none;
}

.checkbox-box {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 7px;
    background: #ffffff;
    box-shadow:
        inset 0 0 0 1.5px rgba(0, 0, 0, .18),
        0 2px 8px rgba(0, 0, 0, .06);
    position: relative;
    transition:
        background .25s ease,
        box-shadow .25s ease,
        transform .2s ease;
}

.checkbox-box::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 4px;
    width: 7px;
    height: 12px;
    border: solid white;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg) scale(0);
    opacity: 0;
    transition:
        transform .25s cubic-bezier(.7, -.4, .25, 1.4),
        opacity .2s ease;
}

.checkbox-text {
    position: relative;
    width: 260px;
    height: 26px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
}

.checkbox-text span {
    position: absolute;
    left: 0;
    white-space: nowrap;
    font-size: 17px;
    font-weight: 500;
}

/* Texte initial */
.checkbox-text span:first-child {
    color: #1d1d1f;
    letter-spacing: 0ch;
    opacity: 1;
    text-indent: 0;
    transition:
        letter-spacing .45s cubic-bezier(.8, -.5, .2, 1.4),
        text-indent .15s ease,
        opacity .25s ease .1s;
}

/* Texte final */
.checkbox-text span:last-child {
    color: #0071e3;
    letter-spacing: -1ch;
    text-indent: -1ch;
    opacity: 0;
    transition:
        letter-spacing .45s cubic-bezier(.8, -.5, .2, 1.4),
        text-indent .15s ease,
        opacity .25s ease;
}

/* État coché */
.checkbox-wrapper input:checked + label .checkbox-box {
    background: #0071e3;
    box-shadow:
        inset 0 0 0 1.5px #0071e3,
        0 3px 10px rgba(0, 113, 227, .25);
}

.checkbox-wrapper input:checked + label .checkbox-box::after {
    opacity: 1;
    transform: rotate(45deg) scale(1);
}

.checkbox-wrapper input:checked + label .checkbox-text span:first-child {
    letter-spacing: -1.4ch;
    text-indent: -1ch;
    opacity: 0;
}

.checkbox-wrapper input:checked + label .checkbox-text span:last-child {
    letter-spacing: 0ch;
    text-indent: 0;
    opacity: 1;
    transition-delay: .22s;
}

/* Accessibilité clavier */
.checkbox-wrapper input:focus-visible + label .checkbox-box {
    box-shadow:
        inset 0 0 0 1.5px #0071e3,
        0 0 0 4px rgba(0, 113, 227, .18);
}
</style>
</head>
<body>

<div class="demoLetter">
  <div class="checkbox-wrapper">
      <input type="checkbox" id="club">
      <label for="club">
          <span class="checkbox-box"></span>

          <span class="checkbox-text">
              <span>Rejoindre le club</span>
              <span>Bienvenue à bord</span>
          </span>
      </label>
  </div>
</div>

</body>
</html>

---

---

L’animation d’une checkbox peut sembler être un détail. Pourtant, ce sont souvent ces petits détails qui donnent une identité à une interface et rendent l’expérience plus agréable pour vos visiteurs.

Grâce à la propriété letter-spacing, vous avez découvert une approche originale permettant de faire disparaître puis réapparaître un texte de façon fluide. En combinant transitions, opacité et gestion de l’état :checked, il devient possible de créer des interactions modernes uniquement avec HTML et CSS.

Je vous encourage maintenant à reprendre ce projet, modifier les textes, tester différentes valeurs de letter-spacing, jouer avec les couleurs et inventer vos propres variantes. C’est en expérimentant que l’on progresse réellement. Et qui sait ? La prochaine animation élégante que vos visiteurs admireront sur votre site sera peut-être née de quelques essais réalisés aujourd’hui autour d’une simple case à cocher.