Comment ajouter des boutons fantômes CSS dans votre thème WordPress

Récemment, l'un de nos lecteurs nous a demandé un tutoriel sur la façon d'ajouter des boutons fantômes CSS dans leurs thèmes WordPress. Les boutons fantômes sont des boutons d'appel à l'action transparents qui sont très populaires de nos jours. Dans cet article, nous vous montrerons comment ajouter facilement des boutons fantômes CSS dans votre thème WordPress en utilisant très peu de CSS et de HTML.

Qu'est-ce qu'un bouton fantôme ?

Un bouton fantôme est une terminologie de conception Web utilisée pour les boutons transparents qui se fondent dans leur arrière-plan et ne sont perceptibles que par la bordure qui les entoure.

Créer des boutons d'appel à l'action normaux dans WordPress est assez facile. Vous pouvez même les ajouter à vos articles et pages sans écrire de CSS ou de HTML. Comme les boutons fantômes sont une nouvelle tendance, il n'existe pas de plugins spécifiques pour créer uniquement des boutons de style fantôme.

Ajout de boutons fantômes dans WordPress

Comme mentionné précédemment, vous devrez utiliser un tout petit peu de CSS et de HTML pour ajouter des boutons fantômes sur votre thème WordPress.

La première chose à faire est d'ajouter le code CSS suivant à la feuille de style de votre thème ou de votre thème enfant.

Vous aurez besoin d'un client FTP pour vous connecter à votre serveur web. Une fois connecté, allez dans le dossier /wp-content/themes/Votre-Thème/ et localisez le fichier style.css. Ouvrez ce fichier pour le modifier dans un éditeur de texte, puis collez cet extrait de code en bas du fichier. (Apprenez-en plus sur le collage d'extraits de code du web dans WordPress).

.ghost-button {
  display: inline-block;
  width: 200px;
  padding: 8px;
  color: #fff;
  border: 2px solid #fff;
  text-align: center;
  outline: none;
  text-decoration: none;
  transition: background-color 0.2s ease-out,
              color 0.2s ease-out;
}
.ghost-button:hover,
.ghost-button:active {
  background-color: #fff;
  color: #000;
  transition: background-color 0.3s ease-in,
              color 0.3s ease-in;
}

Enregistrez vos modifications et téléversez le fichier sur le serveur.

Désormais, chaque fois que vous voudrez afficher le bouton, il vous suffira d'ajouter class="ghost-button".

Par exemple, si vous souhaitez ajouter un lien de téléchargement, créez votre lien de téléchargement comme vous le feriez normalement. Ensuite, passez à l'éditeur de texte pour voir le formatage HTML.

Localisez le code HTML de votre lien de téléchargement et ajoutez la classe CSS comme ceci :

<a href="http://example.com/downloads/" class="ghost-button">Télécharger maintenant</a>

Enregistrez ou mettez à jour votre article, puis prévisualisez-le. Vous verrez un beau bouton fantôme au lieu d'un simple lien.

Nous espérons que cet article vous a aidé à apprendre comment ajouter un bouton fantôme dans votre thème WordPress. Vous pourriez également consulter notre guide sur comment ajouter des boutons dans WordPress sans utiliser de shortcodes

Si vous avez aimé cet article, alors abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.