Récemment, un de nos lecteurs nous a demandé un tutoriel sur la façon d’ajouter des boutons CSS Ghost dans leurs thèmes WordPress. Les boutons fantômes sont les boutons transparents d’appel à l’action qui sont très populaires de nos jours. Dans cet article, nous allons vous montrer 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 que le bouton fantôme ?
Le 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 visibles que par la bordure qui les entoure.
Créer des boutons d’appel à l’action normaux dans WordPress est assez simple. Vous pouvez même les ajouter à vos articles et pages sans écrire de CSS ou de HTML. Étant donné que les boutons fantômes sont une nouvelle tendance, il n’y a pas de plugins spécifiques pour créer uniquement des boutons dans le style fantôme.
Ajouter des 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.
Vous devez d’abord ajouter le code CSS suivant à la feuille de style de votre thème ou 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/Your-Theme/ et localisez le fichier style.css. Ouvrez ce fichier pour le modifier dans un éditeur de texte, puis collez cet extrait de code au bas du fichier. (En savoir plus sur le collage d’extraits de code à partir 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échargez le fichier sur le serveur.
Maintenant, chaque fois que vous souhaitez afficher le bouton, il vous suffit 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">Download Now</a>
Enregistrez ou mettez à jour votre message, puis prévisualisez-le. Vous verrez un beau bouton fantôme au lieu d’un simple lien ancien.
Nous espérons que cet article vous a aidé à apprendre comment ajouter un bouton fantôme dans votre thème WordPress. Vous pouvez également consulter notre guide sur la façon d’ajouter des boutons dans WordPress sans utiliser de shortcodes