On dit souvent que le design est dans les détails. Sur un site web, il n’y a pas de détail plus critique que le bouton. C’est l’élément d’interaction principal. C’est le “Call to Action” (CTA). C’est la poignée de main entre votre utilisateur et votre contenu.

Pourtant, quand on lance un blog, on commence souvent avec ça :

<a href="/blog">Lire le Blog</a>
<a href="[https://github.com](https://github.com)">GitHub</a>

Fonctionnel ? Oui. Excitant ? Pas vraiment. C’est le niveau zéro du design : le lien bleu souligné (ou violet s’il a été visité).

Aujourd’hui, je vous montre comment je suis passé de ces liens tristes à des composants boutons modernes, tactiles et réactifs, en utilisant uniquement du CSS moderne. Pas de framework lourd, juste du bon code artisanal.

Étape 1 : La structure (L’anatomie)

Un bouton moderne, ce n’est pas juste du texte. C’est souvent une icône et du texte. Pour aligner tout ça proprement, oubliez les float ou les vertical-align hasardeux. Le standard de l’industrie, c’est Flexbox.

Voici ma structure HTML de base :

<a href="/blog" class="button primary">
    <svg width="20" height="20" ... >...</svg>
    Lire le Blog
</a>

Et le CSS socle qui change tout :

.button {
    display: inline-flex;  /* La magie opère ici */
    align-items: center;   /* Centre l'icône et le texte verticalement */
    justify-content: center;
    gap: 0.5rem;           /* Espace propre entre l'icône et le texte */
    
    padding: 0.75rem 1.5rem; /* Des boutons "chunky", faciles à cliquer */
    border-radius: 8px;      /* Le standard actuel (ni carré, ni pilule) */
    font-weight: 600;
    text-decoration: none;
    
    /* Pour l'animation future */
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

Rien qu’avec display: inline-flex et gap, vous avez réglé 90% des problèmes d’alignement des icônes.

Étape 2 : La hiérarchie (Primary vs Secondary)

Tous les boutons ne naissent pas égaux. Sur ma page d’accueil, je veux que les gens lisent mon blog. Aller sur mon LinkedIn est secondaire.

Si tout est rouge clignotant, rien n’est important. Il faut créer une hiérarchie visuelle.

Le bouton “Primary” (L’action principale)

Il doit “pop”. J’utilise ma couleur d’accentuation (définie dans mes variables CSS) et une légère ombre portée pour donner de la profondeur.

.primary {
    background-color: var(--accent-color); /* Mon bleu électrique */
    color: white;
    box-shadow: 0 4px 14px 0 rgba(0, 118, 255, 0.39); /* Une ombre colorée, très moderne */
}

Le bouton “Secondary” (L’action secondaire)

Il doit être présent, mais discret. Souvent un fond blanc ou gris très clair avec une bordure subtile.

.secondary {
    background-color: white;
    color: #333;
    border: 1px solid #e5e7eb;
}

Étape 3 : Le “Feel” (L’interaction)

C’est ce qui différencie un site amateur d’un site pro : le feedback. L’utilisateur doit sentir qu’il peut cliquer.

Au survol (:hover), je ne me contente pas de changer la couleur. Je fais léviter légèrement le bouton. C’est un micro-mouvement qui rend l’interface vivante.

.button:hover {
    transform: translateY(-2px); /* Le bouton monte de 2 pixels */
    filter: brightness(1.1);     /* Il s'illumine légèrement */
}

Note : L’ombre portée définie plus tôt aide à vendre cet effet de lévitation.

Étape 4 : Le piège du Mobile (Responsive)

C’est là que tout casse généralement. Sur un ordinateur, mes trois boutons (“Blog”, “GitHub”, “LinkedIn”) tiennent sur une ligne. Sur un iPhone, ils s’écrasent, le texte passe à la ligne, c’est moche.

La solution UX ? Empiler.

Sur mobile, on ne veut pas de petits boutons côte à côte (difficiles à viser avec le pouce). On veut des larges bandes cliquables.

/* Le conteneur de mes boutons */
.button-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

@media (max-width: 600px) {
    .button-group {
        flex-direction: column; /* On passe de ligne à colonne */
        width: 100%;
    }

    .button {
        width: 100%; /* Le bouton prend toute la largeur */
        justify-content: center;
    }
}

Résultat

En quelques lignes de CSS, nous sommes passés d’un lien hypertexte des années 90 à un composant d’interface moderne :

  1. Structure flexible avec Flexbox.
  2. Hiérarchie claire avec des variantes de couleurs.
  3. Feedback satisfaisant avec des animations au survol.
  4. Expérience mobile optimisée.

Le code n’est pas complexe, mais il demande de l’intention. C’est ça, le secret du CSS moderne : comprendre que chaque pixel communique quelque chose à l’utilisateur.

Prochaine étape : Maintenant que les boutons sont beaux, comment organiser la structure globale de la page ? Dans le prochain article, on parlera de l’architecture d’Astro et pourquoi j’ai dû éclater mon Layout monolithique.