Accueil
Blogger
CSS

Ajouter des boutons dans les articles ou les pages de votre site web – Pur HTML et CSS

Nous allons voir dans ce tutoriel comment créer des boutons cliquables au design élégant en utilisant de simples codes HTML et CSS.
Ajouter des boutons dans les articles ou les pages de votre site web – Pur HTML et CSS


Nous allons voir dans ce tutoriel comment créer des boutons cliquables au design élégant en utilisant de simples codes HTML et CSS. On abordera le procédé pour la plateforme Blogger et le CMS WordPress.



    Vous pouvez par exemple les employer pour :
    • Sublimer vos liens de téléchargement
    • Renvoyer les lecteurs vers une autre page dans votre blog (bouton contactez-nous , bouton abonnez-vous à notre newsletter, etc. )
    • Renvoyer les visiteurs vers des ressources stockées dans le cloud comme Google Drive (document PDF, Ebook gratuit, présentation, graphique, etc.)
    • Renvoyer les internautes vers des galeries d'images ou des vidéos
    Ces boutons vont non seulement embellir votre article, mais augmenteront le taux de clic grâce à leur apparence attrayante et entièrement personnalisable. 

    Bouton avec Emoji (texte dégradé linéaire)

    Ajouter le code CSS afin de personnaliser l'apparence du bouton

    Dans WordPress

    Ajoutez le code CSS qui suit dans votre feuille de style CSS style.css. Pour ce faire, cliquez sur le menu "Apparence" puis "Personnaliser". Collez le code dans le panneau intitulé "CSS additionnel".

    Dans Blogger

    Rappel : avant d'entamer toute modification du code HTML de votre thème, je vous conseille vivement d'enregistrer une copie de votre thème. Si vous ne savez pas comment procéder, cliquez ici.
    1. Cliquez sur "Thème"> "Modifier le code HTML"
    2. Une boite contenant le code HTML de votre thème s'affichera
    3. Cliquez n'importe où à l'intérieur du code HTML
    4. Appuyez ensuite sur Ctrl et F en même temps ou Cmd et F pour Mac, une petite barre de recherche doit apparaître en haut à gauche dans la nouvelle interface de Blogger.
    5. Cherchez la balise ]]></b:skin>
    6. Insérez le code CSS qui suit juste au-dessus de la balise ]]></b:skin>

    
/* Bouton CSS - fonction dégradée linéaire */ 

.degrage{background-color:#f2eeea;background-image:linear-gradient(45deg,#f2eeea 50%,#e53b51 50%);background-size:270%;background-repeat:repeat;background-position:top right;-webkit-background-clip:text;-webkit-text-fill-color:transparent;-moz-background-clip:text;-moz-text-fill-color:transparent;animation:button-animation .65s .15s ease-out forwards}

.bouton a:hover,.bouton a:hover span{animation:button-animation-rev .65s ease-out forwards}

.bouton a:hover{box-shadow:3px 2px 10px 1px rgba(0,0,0,0.15);transition:.5s}

.bouton a{margin-left:auto;margin-right:auto;background-image:linear-gradient(45deg,#e53b51 50%,#f2eeea 50%);background-size:270%;background-repeat:repeat;background-position:top right;animation:button-animation .65s .15s ease-out forwards;display:table;border-radius:.5em;text-decoration:none;box-shadow:7px 4px 20px 1px rgba(0,0,0,0.15);padding:1em 0;cursor:pointer}

.bouton a span{font-weight:900;font-size:17px;text-align:center;margin-bottom:0;margin-bottom:-.25em;padding:0 0.5em}

@keyframes button-animation {

0%{background-position:top right}

100%{background-position:top left}

}

@keyframes button-animation-rev {

0%{background-position:top left}

100%{background-position:top right}

} 

    Activer le bouton lors de la rédaction de votre article

    Pour activer le bouton, vous devez insérer le code HTML ci-dessous dans l'éditeur des articles (mode Texte ou HTML) à l'endroit où vous souhaitez le voir apparaître.

    Que ce soit dans WordPress ou Blogger, l’écran d’édition des publications est doté de deux éditeurs pour rédiger des articles, le mode visuel qui ressemble à un traitement de texte (Word) et le mode texte ou HTML. Procédez de la même façon pour l'insérer dans une page statique.

    Dans WordPress

    Lors de l'édition de votre article, basculez au mode Texte et insérez le code HTML du bouton.

    Ce code doit être ajouté dans un article ou une page WordPress dans le mode "Texte"  si vous utilisez l'éditeur classique ou dans un "Bloc HTML personnalisé" si vous utilisez l'éditeur Gutenberg.  Vous pouvez consulter la méthode d'intégration en image ici.

    Dans Blogger

    Lors de l'édition de votre article, basculez au mode HTML et insérez le code HTML du bouton.

    
<div class="bouton">

<a href="https://www.universblogger.com/" target="_blank"><span class="degrage"> 👉 Cliquez ici 👈 </span></a>

</div>

    Ajuster le code à vos besoins :

    Dans la ligne <a href="https://www.universblogger.com/", remplacez l'adresse URL avec votre lien de destination

    Dans le code <span class="degrage"> 👉 Cliquez ici 👈 </span></a>, ajouter le texte qui sera affiché dans votre bouton. Rendez-vous ensuite sur les sites web qui proposent des Emojis tels que emojipedia.org.

    Personnaliser les couleurs de votre bouton

    Choisissez deux couleurs de votre choix et insérez-les ensuite dans le code CSS qui suit.

    Ce code sera placé de préférence à la fin du code HTML de votre article ou à la suite du code précédent (code HTML du bouton). Vous l'aurez compris, il faudra basculer une fois de plus dans le mode texte ou HTML dans l'éditeur des publications.

    Dans WordPress

    Adaptez le code qui suit selon vos envies et ajoutez-le ensuite dans un article ou une page WordPress dans le mode "Texte" si vous utilisez l'éditeur classique ou dans un "Bloc HTML personnalisé" si vous utilisez l'éditeur Gutenberg.

    Dans Blogger

    Dans l'éditeur des articles ou des pages Blogger, basculez dans le mode HTML et ajoutez le code suivant à la fin du code HTML de votre article. 

    
<style>
.degrage {
background-image:linear-gradient(45deg,#396a92 50%,#e9f2f9 50%)
}

.bouton a {
background-image:linear-gradient(45deg,#e9f2f9 50%,#396a92 50%)
}
</style>

    Ajustez le code ci-dessus

    Dans la ligne de code :

    .degrage {
        background-image: linear-gradient(
        45deg,
        #396a92 50%,
        #e9f2f9 50%
      );
    }

    1- #396a92 remplacez ce code couleur avec celui de votre texte
    2- #e9f2f9 remplacez ce code couleur avec celui de votre arrière-plan

    Dans la ligne de code :

    .bouton a {
        background-image: linear-gradient(
        45deg,
        #e9f2f9 50%,
        #396a92 50%
      );
    }

    Entrez les mêmes couleurs en prenant soin de changer l'ordre des codes couleur (inversez les codes couleur)

    2- #e9f2f9
    1- #396a92


    Bouton avec la police d'icônes Font Awesome




    Prérequis avant l'installation des boutons

    Vous devez au préalable vérifier que la bibliothèque Font Awesome est bien installer dans votre thème Blogger ou WordPress. Si ce n'est pas le cas, voici le procédé pour l'ajouter à votre site web.

    Installer Font Awesome dans WordPress

    Il existe plusieurs méthodes pour installer Font Awesome dans WordPress.
    La plus simple est d'ajouter le lien CDN dans l’en-tête de votre thème, entre les balises <head> et </head>.

    
<link rel="stylesheet" href=" https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css ">


    Vous pouvez aussi choisir d'installer le plugin officiel Font Awesome.

    Installer Font Awesome dans Blogger

    Veuillez consulter cette section dans laquelle on détaille la procédure étape par étape pour vérifier et ajouter la bibliothèque Font Awesome dans Blogger.

    Personnaliser l’apparence des boutons à l'aide des propriétés CSS

    Dans WordPress

    Ajoutez le code CSS qui suit dans votre feuille de style CSS style.css. Pour ce faire, cliquez sur le menu "Apparence" puis "Personnaliser". Collez le code dans le panneau intitulé "CSS additionnel".

    Dans Blogger

    Incorporez le code CSS suivant dans le code HTML de votre thème au-dessus de la balise ]]></b:skin>. Ce procédé est expliqué dans la première section de cet article.

    
.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}

.button ul{margin:0;padding:0}

.button li{display:inline;margin:5px;padding:0;list-style:none}

.button li a.bun,.button li a.bdeux{position:relative;padding:10px 48px 11px 16px;background:#2cc990;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s}

.button li a.bdeux{background:#2c82c9}

.button li a.bun:hover,.button li a.bdeux:hover{background:#333}

.button li a.bun:active,.button li a.bdeux:active{cursor:pointer}

.button li a.bun:after,.button li a.bdeux:after{content:"\f019";background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:400;display:inline-block;margin:0 0 0 10px;color:#fff;padding:11px;font-family:fontawesome}

.button li a.bdeux:after{content:"\f108"}

    Insérer le code HTML des boutons dans l'éditeur des pages ou des articles dans WordPress et Blogger

    Dans WordPress

    Lors de l'édition de votre article (éditeur WordPress classique), basculez au mode Texte et insérez le code HTML du bouton à l'endroit où vous souhaitez le voir apparaître. Ce code doit être ajouté dans dans un "Bloc HTML personnalisé" si vous utilisez l'éditeur Gutenberg.  Vous pouvez consulter la méthode d'intégration en image ici.

    Dans Blogger

    Lors de l'édition de votre article, basculez au mode HTML et insérez le code HTML du bouton à l'endroit où vous souhaitez le voir apparaître.

    
<ul class="button">

<li><a class="bun" href="https://www.universblogger.com" rel="nofollow" target="_blank">Télécharger le PDF</a></li>

<li><a class="bdeux" href="https://www.universblogger.com" target="_blank">consulter en ligne</a></li>

</ul >


    Ajuster le code à vos besoins :

    Dans la ligne <a href="https://www.universblogger.com/", ajoutez l'adresse URL de destination

    Dans le code >Télécharger le PDF</a> et >consulter en ligne</a>, personnalisez le texte de votre bouton.

    rel="nofollow" supprimez ce code si vous renvoyez les visiteurs vers un lien interne.

    Personnaliser les icônes et les couleurs de votre bouton

    Si vous souhaitez personnaliser les icônes et les couleurs livrées par défaut :

    Dans WordPress

    Adaptez le code qui suit selon vos envies et ajoutez-le ensuite dans un article ou une page WordPress dans le mode "Texte" si vous utilisez l'éditeur classique ou dans un "Bloc HTML personnalisé" si vous utilisez l'éditeur Gutenberg.

    Dans Blogger

    Dans l'éditeur des articles ou des pages Blogger, basculez dans le mode HTML et ajoutez le code suivant à la fin du code HTML de votre article.

    
<style>

.button li a.bun{

    background: #cb2027; /*changer la couleur de l’arrière-plan du premier bouton*/ 

    color: #fff!important; /*changer la couleur du texte du premier bouton*/ 

}
.button li a.bdeux {

    background: #19bfe5; /*changer la couleur de l’arrière-plan du deuxième bouton*/ 

    color: #fff!important; /*changer la couleur du texte du deuxième bouton*/ 

}

.button li a.bun:hover,.button li a.bdeux:hover {

    background:#0e76a8; /*changer la couleur de l’arrière-plan des boutons lors du survol avec la souris*/ 

}
.button li a.bun:after {

    content: "\f019"; /*voir la remarque ci-dessous*/ 

}
.button li a.bdeux:after {  

    content: "\f108";/*voir la remarque ci-dessous*/

}

</style>

    Remarque :
    les codes content: "\f019" et content: "\f108" représentent le code CSS (Unicode) de l'icône Font awsome.
    Vous trouverez la liste complète des codes CSS (Unicode) de la police d'icônes Font Awesome dans cet article. Il suffit de repérer l'icône de votre choix puis copier son code pour le coller ensuite dans la propriété "content".
    Dans notre exemple, l'unicode "\f019" correspond à l'icône "fa-download"  et la valeur "\f108" correspond à l'icône "fa-desktop".


    Boutons animés (icônes Font Awesome)



     

    Dans WordPress

    Ajoutez le code CSS qui suit dans votre feuille de style CSS style.css. Pour ce faire, cliquez sur le menu "Apparence" puis "Personnaliser". Collez le code dans le panneau intitulé "CSS additionnel".

    Dans Blogger

    Incorporez le code CSS suivant dans le code HTML de votre thème au-dessus de la balise ]]></b:skin>. Ce procédé est expliqué dans la première section de cet article.


    
.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button ul{margin:0;padding:0}
.button li{display:inline;margin:5px;padding:0;list-style:none}
.button li a.bun,.button li a.bdeux{position:relative;padding:10px 48px 11px 16px;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s}
.button li a.bun{background:linear-gradient(-45deg,#1f00f4,#3aa4f3,#c1249a,#d20552);background-size:auto;background-size:400% 400%;animation:Gradient 8s ease infinite}
.button li a.bdeux{background:linear-gradient(-45deg,#880080,#973af3,#f24f47,#ac4a06);background-size:auto;background-size:400% 400%;animation:Gradient 8s ease infinite}
.button li a.bun:active,.button li a.bdeux:active{cursor:pointer}
.button li a.bun:after,.button li a.bdeux:after{content:"\f019";background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:400;display:inline-block;margin:0 0 0 10px;color:#fff;padding:11px;font-family:fontawesome}
.button li a.bdeux:after{content:"\f108"}
@keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} 

     

    Insérer le code HTML des boutons dans l'éditeur des pages ou des articles dans WordPress et Blogger


    
<ul class="button">
<li><a class="bun" href="https://www.universblogger.com/" target="_blank">Télécharger le PDF</a></li>
<li><a class="bdeux" href="https://www.universblogger.com/" target="_blank">consulter en ligne</a></li>
</ul>
 

    Personnaliser les couleurs de votre bouton

    Si vous souhaitez personnaliser les icônes et les couleurs livrées par défaut :

    Dans WordPress

    Adaptez le code qui suit selon vos envies et ajoutez-le ensuite dans un article ou une page WordPress dans le mode "Texte" si vous utilisez l'éditeur classique ou dans un "Bloc HTML personnalisé" si vous utilisez l'éditeur Gutenberg.

    Dans Blogger

    Dans l'éditeur des articles ou des pages Blogger, basculez dans le mode HTML et ajoutez le code suivant à la fin du code HTML de votre article.

    
<style> 
.button li a.bun {
background:linear-gradient(-45deg,#1f00f4,#3aa4f3,#c1249a,#d20552);
/*changer les couleurs du premier bouton*/
}

.button li a.bdeux {
background:linear-gradient(-45deg,#880080,#973af3,#f24f47,#ac4a06);
/*changer les couleurs du deuxième bouton*/
}
</style>


    Alors que cet article touche à sa fin, j’espère que ces boutons en HTML et CSS vous auront plu.

    Merci d'avoir pris le temps de lire ce tutoriel. N'hésitez pas à le partager sur les réseaux sociaux si vous jugez qu'il pourrait être utile pour d'autres personnes.