Créer un bouton personnalisé en HTML/CSS sur WordPress (avec FontAwesome)

Vous souhaitez ajouter un bouton moderne et stylisé sur votre site WordPress ? Que ce soit pour réserver un appel, rediriger vers une page produit, ou simplement améliorer l’UX, un bouton HTML/CSS personnalisé est un excellent choix pour sortir du lot.

Dans ce tutoriel rapide, on va créer un bouton design avec icône à insérer n’importe où sur votre site, que ce soit dans un article, une page, ou un bloc HTML personnalisé.

✨ Résultat final

Voici ce qu’on va obtenir :

Test du bouton

📦 Prérequis : Installer Font Awesome

Pour afficher l’icône téléphone (fa-phone), il est nécessaire d’avoir Font Awesome installé.

🔧 Deux options :

Installez l’extension Better Font Awesome, qui est simple et bien intégrée à WordPress.
Ou ajoutez manuellement le CDN Font Awesome dans le fichier header.php (non recommandé pour les débutants).

🧩 Étape 1 : Ajouter le code HTML du bouton

Rendez-vous dans un bloc HTML personnalisé dans l’éditeur WordPress (Gutenberg) ou directement dans un modèle Elementor, Bricks, ou autre.

Collez ce code :

<a href="votrelienici.fr" target="_blank" class="btncustom">
  <i class="fa-solid fa-phone"></i>&nbsp; Placeholder
</a>

🔁 Remplace l’URL par celle de ton propre lien de redirection si nécessaire.

🎨 Étape 2 : Ajouter le CSS personnalisé

Il faut maintenant styliser le bouton pour le rendre attrayant. Pour cela, deux options :

Option A : via Personnaliser → CSS additionnel

Dans WordPress, vas dans :
Apparence → Personnaliser → CSS additionnel, puis colle le code suivant :

.btncustom {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    margin-bottom: 10px;
    background-color: #003559;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    font-family: var(--wp--preset--font-family--alata, sans-serif);
    border-radius: 999px;
    border: none;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: background-color 0.2s ease-in-out;
    cursor: pointer;
}

.btncustom:hover {
    background-color: #006daa;
}

.btncustomoutline {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    margin-bottom: 10px;
    background-color: transparent;
    color: #003559;
    font-weight: bold;
    font-size: 16px;
    font-family: var(--wp--preset--font-family--alata, sans-serif);
    border-radius: 999px;
    border: 2px solid #003559;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: background-color 0.2s ease-in-out;
    cursor: pointer;
}

.btncustomoutline:hover {
    background-color: #e6e6e6;
}

🔁 Étape 3 (optionnel) : Variante outline

Si vous préférez un style plus léger (contour au lieu d’un fond plein), utilisez la classe .btncustomoutline :

<a href="tonsite.fr" target="_blank" class="btncustomoutline">
  <i class="fa-solid fa-phone"></i>&nbsp; Réserver un appel
</a>

✅ Conseils SEO et accessibilité

Ajoutez un attribut aria-label à votre bouton si nécessaire, par exemple : <a href="..." class="btncustom" aria-label="Réserver un appel avec M. Lebrun">
Le texte du bouton doit rester lisible et explicite pour les moteurs de recherche et les utilisateurs.
Évitez d’ajouter trop d’effets JavaScript qui pourraient ralentir le chargement.