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, le bouton sera classique. Il reste alors la possibilité de créer ce bouton en CSS. Je vais vous apprendre quelques notions de CSS pour que vous puissiez 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 votre bouton CSS d’appel à l’action, je vais vous indiquer comment 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”.

Pour un thème classique. Pour un thème FSE (full site editing)

• Aller sur “apparence”.
• Puis “Editeur”.
• Cliquez sur la page et cliquez sur le rond noir et blanc en haut à droite.
• Enfin, cliquez sur l’onglet “CSS additionnel”.

C’est à cet endroit que vous allez programmer votre code CSS. Côté article, il faut choisir le block “HTML personnalisé” pour insérer le code HTML de votre bouton. Ne vous inquiétez pas, je ne vais pas entrer dans des grandes explications de code CSS, je vais faire simple pour que vous puissiez créer votre bouton et le personnaliser.

Notions de HTML

Nous  allons commencer par la partie HTML de votre article. Commençons par un peu de jargon. Une balise est un élément de codage utilisé en HTML. Vous en connaissez déjà plusieurs, <h1></h1> par exemple.

Première chose, si vous voulez mettre du code en explication sur votre article, utilisez les balises <code>ton code</code> pour entourer le code.

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

<!-- Mon code HTML -->
<h1>Mon titre principal</h1>

Comme vous pouvez 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.

Vous n’aurez 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 votre bouton d’appel à l’action, voici le code que vous devez 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 vous pouvez le voir ce n’est pas insurmontable. Je vais faire en sorte de vous expliquer chaque portion de ce code afin que vous puissiez bien comprendre comment faire votre 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, vous avez l’attribut href="mon_lien" qui est le lien proprement dit.

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

Ensuite nous avons relation="nofollow noopener" qui sont des informations pour vos liens.

Nofollow signifie ne pas suivre. Cela indique aux moteurs de recherche de ne pas suivre le lien et donc de ne pas le considérer comme un lien qui apporte un complément d’information.

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

Il existe également noreferrer qui permet de ne pas indiquer au site que vous visitez, d’où vous venez afin d’éviter d’être pister.

La classe permet de donner un nom à votre bouton pour pouvoir lui attribuer des paramètres de mise en forme en CSS. Cela peut être n’importe quel nom sans espaces ni caractères spéciaux.

Pour en finir avec le HTML

Il existe d’autres attributs concernant les liens, mais ils sont facultatifs. La balise title par exemple qui permet de donner un titre au survol du lien.

Ce sera tout pour le HTML. Ça va ? pas trop violent ?

Créer un bouton CSS dans WordPress

Voilà le plus intéressant. Vous allez 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 vous devez insérer dans la partie CSS. Je vais t’expliquer tout cela.

 /* code du bouton */

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;color:black;
border: 1px solid black;
 }

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 vous voulez mettre deux boutons sur la même ligne, ils devront avoir la valeur : display:inline-block;

width:70%;

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

Pour désigner la hauteur utilisez la fonction: height

padding:10px;

Le padding représente l’espace entre votre 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, vous aurez plus de 10 pixels.

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

Vous pouvez 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, vous aurez 5 pixels en haut, 10 à droite, 8 en bas et 12 à gauche.

background-color:#efad4d;

La couleur de votre boîte, ici orange. vous pouvez é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;

Vous devez définir une largeur à votre boite pour utiliser cette fonction. Sans quoi, le texte n’a pas de repère pour l’alignement. Dans notre exemple, nous avons défini la largeur à 70 % de l’écran.

Vous pouvez 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 votre 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. Vous pouvez également donner une valeur pour chaque espace. Par exemple margin: 0px 10px 20px 30px;

Lorsqu’il n’y a que 2 valeurs, la première s’applique pour le haut et le bas, la seconde pour la droite et la gauche. Par exemple : margin: 5px 10px.

font-weight:bold;

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

color:black;

Cela permet de donner une couleur au texte.

border: 1px solid black;

Cela permet de mettre une bordure à la boîte. On indique d’abord l’épaisseur de la bordure. On indique ensuite son style, ici un trait plein. Pour terminer on indique la couleur à utiliser.

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

Voilà, votre bouton fonctionne déjà. Comme vous voyez ce n’est pas bien compliqué. Enfin, je vous donne une dernière fonction pour personnaliser votre bouton. Si vous voulez changer la police de caractères, utilisez la fonction font-family: nom_de_la_police

Voyons maintenant la deuxième partie du code

/* bouton au survol  en ajoutant :hover */

 a.bouton_css:hover {background-color :#f2c78c;
}

Cela va aller très vite.

Ce code change la couleur du bouton lorsqu’il est survolé par la souris avec l’instruction background-color

On désigne cette action par la pseudo-classe :hover qui signifie au survol de la balise.

Dans cet exemple, on cible la balise a avec la class .bouton_css au survol avec :hover et on lui donne une couleur d’arrière plan avec le code couleur #f2c78c.

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 vous aider. Si ce n’est pas votre truc, vous avez aussi toujours la possibilité de passer par l’éditeur Gutenberg ou Elementor et d’intégrer vos boutons lorsque vous allez créer vos pages de capture et de vente avec les widgets proposés.

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