Créer un bouton d’appel à l’action sur WordPress en CSS

Il m’arrive parfois de devoir créer un bouton CSS d’appel à l’action pour un site que ce soit dans un article, ou pour ajouter un bouton cliquable pour un lien d’affiliation. Alors, oui, je pourrais utiliser un plugin comme Elementor, mais dans ce cas, certains plugins que j’utilise pour la rédaction ne fonctionnent plus. Il reste alors la possibilité de créer ce bouton en CSS. Je vais t’apprendre quelques notions de CSS pour que tu puisses le faire facilement en cas de besoin.

Dans cet article nous allons voir comment créer un bouton CSS grâce à quelques lignes de code. Vous allez comprendre comment personnaliser votre bouton pour l’adapter à votre blog ou votre site internet et comprendre ce que signifie les différentes fonctions CSS.

Comment créer un bouton CSS sur WordPress

Avant de créer ton bouton CSS d’appel à l’action, je vais t’indiquer comment cela va se passer. Pour ajouter du code CSS qui va se répercuter sur toutes tes pages, ça se passe dans le menu de WordPress.

• Aller sur « apparence ».
• Puis « Personnaliser ».
• Et enfin « CSS additionnel ».

C’est à cet endroit que tu vas programmer ton code CSS. Côté article, il faut cliquer sur l’onglet « Texte » pour insérer le code HTML de ton bouton. Ne t’inquiète pas, je ne vais pas entrer dans des grandes explications de code CSS, je vais faire simple pour que tu puisses créer ton bouton et le personnaliser.

Notions de HTML

Nous  allons commencer par la partie HTML, donc dans la partie « Texte » de ton article. Commençons par un peu de jargon. Une balise est un élément de codage utilisé en HTML. Tu en connais déjà plusieurs, <h1></h1> par exemple.

Première chose, si tu veux mettre du code sur ton article. Tu vas devoir utiliser les balises <code>ton code</code> pour entourer le code.

Cela permet de signaler que ton code n’est pas du code, mais un texte. Ainsi tu n’auras pas de problème avec WordPress. C’est important.

Comme tu peux le voir cela met le texte en noir avec un fond gris. Ce n’est pas le but de l’article, mais ça peut te servir. Tu n’auras pas à utiliser ces balises dans cette leçon.

Un peu plus sur les balises

Les balises les plus courantes sont toujours composées de deux parties. Une balise ouvrante et une balise fermante. C’est le symbole slash « / » qui ferme une balise. Assez de blabla, passons à notre bouton.

Créer un bouton dans WordPress

Pour créer ton bouton d’appel à l’action, voici le code que tu dois utiliser en utilisant l’option « HTML personnalisé » dans les blocs de WordPress :

<span><a href="mon_lien" target="_blank" relation="nofollow noopener" class="bouton">Le texte pour un appel à l'action de ton bouton</a></span>

Comme tu peux le voir ce n’est pas insurmontable. Je vais faire en sorte de t’expliquer chaque portion de ce code afin que tu puisses bien comprendre comment faire ton bouton et pouvoir le personnaliser par la suite.

Quelques explications pour créer un bouton dans wordpress

La balise <a></a> indique un lien. Un lien est composé de différents éléments que l’on nomme des attributs.

Ainsi, tu as l’attribut href="mon_lien" qui est le lien proprement dit.

Tu as ensuite l’attribut target qui est facultatif. S’il est égal à_blank ta page va s’ouvrir dans une nouvelle fenêtre de ton navigateur. S’il n’est pas présent elle s’ouvrira à la place de la page actuelle.

Tu as ensuite relation="nofollow noopener"qui sont des informations pour tes liens.

Nofollow signifie ne pas suivre. Cela indique aux moteurs de recherche de ne pas suivre le lien donc de ne pas le considérer comme un lien qui apporte un complément d’information. C’est obligatoire pour les liens d’affiliation pour ne pas subir de pénalité par Google.

Quant à la valeur,noopenercela sert à protéger ton lien s’il est ouvert dans une nouvelle fenêtre. Car il y a une faille de sécurité sans cela.

La classe permet de donner un nom à ton bouton pour pouvoir lui attribut des paramètres de mise en forme en CSS par exemple.class

Pour en finir avec le HTML

Il existe d’autres attributs concernant les liens, mais ils sont facultatifs. Ce sera tout pour le HTML. Ça va ? pas trop violent ?

Créer un bouton CSS dans WordPress

Voilà le plus intéressant. Tu vas voir le CSS c’est simple. Ainsi, voici ce que l’on va faire ensemble.

un très joli bouton pour un appel à l’action

Pour que ça fonctionne il faut installer une extension qui permet de personnaliser son CSS. J’ai pris l’extension “Simple custom CSS”, ça fonctionne sans problème. Pour personnaliser il faut se rendre sur « apparence », puis « personnaliser » et enfin “simple custom CSS”.

Voici le code que tu dois insérer dans la partie CSS. Je vais t’expliquer tout cela.


a.bouton_css{
display:block;
width:70%;
padding:10px;
background-color:#efad4d;
text-decoration:none;
text-align:center;
border-radius:7px;
margin:0px auto;
font-weight:bold;
}


Créer un bouton en CSS pour un appel à l’action

a.bouton

nom de la balise, le point indique que l’on sélectionne une class au nom de « bouton », c’est donc le lien que l’on a créé qui est sélectionné. Les parenthèses indiquent le début et la fin des caractéristiques.

display:block;

signifie que l’on affiche l’élément en tant que block. Il y aura donc un retour à la ligne avant et après le lien. C’est comme si il était dans une « boite invisible » qui prend la largeur de la page.

Cependant, en réalité, la « boite » se limite à l’espace utilisé réellement par la phrase. Si tu veux mettre deux boutons sur la même ligne, ils devront avoir la valeur.display:inline-block;

width:70%;

La largeur de ton bouton (ta boîte invisible). Ici, 70 % de la page. Tu peux mettre une valeur en pixels à la place, par exemple :width:200px;

pour désigner la hauteur utilise la fonction :height

padding:10px;

le padding représente l’espace entre ton texte et le bord de la boîte. Ici, 10 pixels tout autour. Mais comme il y a eu une dimension donnée pour la largeur, sur la droite et la gauche, tu auras plus de 10 pixels.

Un padding s’ajoute si un espace est défini. C’est-à-dire ici, la vraie largeur de ta boîte sera de 70 % + 10 pixels de chaque côté.

Tu peux utiliser padding de la manière suivante pour être plus précis :padding: 5px 10px 8px 12px;

Ça se lit dans le sens des aiguilles d’une montre. Ainsi, tu auras 5 pixels en haut, 10 à droite, 8 en bas et 12 à gauche.

background-color:#efad4d;

La couleur de ta boîte, ici orange. Tu peux écrire la couleur en anglais, par exemple background-color:blue; pour un fond bleu.

text-decoration:none;

Supprime le soulignement du lien. Par défaut, les liens sont soulignés pour les différencier du texte normal.

text-align:center;

Tu dois définir une largeur à ta boite pour utiliser cette fonction. Sans quoi, le texte n’a pas de repère pour l’alignement. Nous l’avons défini à 70 % de l’écran plus haut.

Tu peux utiliser les valeurs left, right ou justify à la place. Pour un alignement à gauche, droite ou sur toute la largeur (ajoute des espaces entre les mots).

border-radius:7px;

Cette fonction permet de créer des angles arrondis. Ici ils seront d’un rayon de 7 pixels.

margin:0px auto;

La marge est l’espace entre le bord de ta boîte et le bord de la page. Comme pour le padding cela se lit dans le sens des aiguilles d’une montre. Donc ici, 0 pixel en haut et une marge calculée automatiquement sur les côtés. Tu peux également donner une valeur pour chaque espace. Par exemple margin: 0px 10px 20px 30px;

font-weight:bold;

Cela permet de mettre le texte en gras. Cela signifie poid des caractères.

Fin de l’étape pour créer un bouton sur WordPress

Voilà, ton bouton fonctionne déjà. Comme tu vois ce n’est pas bien compliqué. Enfin, je te donne une dernière fonction pour personnaliser ton bouton. Si tu veux changer la police de caractères, utilise la fonctionfont-family: nom_de_la_police

Voyons maintenant la deuxième partie du code


a:hover.bouton {
background-color:#fdad3c;
text-decoration:none;
font-weight:bold;
}


Cela va aller très vite. Ce code change la couleur du bouton lorsqu’il est survolé par la souris.background-color

On désigne cette action par l’instruction a:hover qui signifie au survol de la balise a.

Tu as ensuite le point qui désigne que c’est une class et le nom de cette class, ici le nom de ton bouton. Pour le reste, je t’invite à relire ce que l’on a vu précédemment.

Conclusion :

Voilà, le but de ce blog n’est pas la programmation, mais je me suis retrouvé à devoir créer des boutons. J’espère que cela pourra t’aider. Si ce n’est pas ton truc, tu as aussi toujours la possibilité de passer par des solutions complètes qui te permettent de créer tes pages de capture et de vente.

Je t’invite à aller sur la Khan academy qui dispose des cours gratuits sur la programmation si tu veux te perfectionner. Mais aussi les teachers du net sur YouTube. Un beau bouton en CSS peut augmenter ton taux de conversion par rapport à un simple lien. Ce n’est pas compliqué à mettre en place.