Comment ajouter des boutons CSS Ghost dans votre thème WordPress

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 l’appel transparent aux boutons d’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 HTML..

Qu'est-ce que Ghost Button??

Le bouton Ghost 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 un appel normal à des boutons d'action dans WordPress est assez facile. Vous pouvez même leur ajouter vos publications et vos pages sans écrire de code CSS ou HTML. Puisque les boutons fantômes sont une nouvelle tendance, il n’existe aucun plugin spécifique pour créer de simples boutons dans le style fantôme..

Ajout de boutons fantômes dans WordPress

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

Tout d’abord, vous devez ajouter le code CSS suivant à la feuille de style de votre thème ou du thème de votre enfant..

Vous aurez besoin d’un client FTP pour vous connecter à votre serveur Web. Une fois connecté, accédez au 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 au bas du fichier. (En savoir plus sur le collage d'extraits de code du Web dans WordPress).

 .bouton fantôme display: inline-block; largeur: 200px; rembourrage: 8px; couleur: #fff; bordure: 2px solide #fff; text-align: center; contour: aucun; texte-décoration: aucun; transition: atténuation de la couleur de fond 0,2 s, atténuation de la couleur 0,2 s;  .ghost-button: survol, .ghost-button: actif background-color: #fff; couleur: # 000; transition: couleur d'arrière-plan de 0,3 seconde, couleur 0,3 seconde, de couleur;  

Enregistrez vos modifications et 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-le 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 suit:

Télécharger maintenant

Enregistrez ou mettez à jour votre message, puis affichez un aperçu. Vous verrez un beau bouton fantôme au lieu de l'ancien lien..

Nous espérons que cet article vous a aidé à apprendre à ajouter un bouton fantôme dans votre thème WordPress. Vous pouvez également consulter notre guide sur la manière d’ajouter des boutons dans WordPress sans utiliser de code court.

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