Wpcours

Des tuto, thèmes et plugins pour Wordpress

  • WORDPRESS
  • TUTORIELS
  • PLUGINS
  • WP-SEO
  • THEMES
  • Blogger
  • Contact

Ajouter des boutons colorés simple en css à votre site

Màj le 10 avril 2019

Dans ce petit tutoriel on va apprendre comment ajouter des boutons colorés simple à votre site/blog en utilisant du css . Ces boutons peuvent être utilisés pour créer des boutons de téléchargement ou de redirection. Vous pouvez aussi voir notre précédent tutoriel sur comment ajouter des zones de contenu colorées sur votre site?

Voici les 6 boutons colorés que ce tutoriel va vous montrer comment les implémenter:
boutons colorés pour site

Dans votre éditeur de texte de Wordpress, tout ce que vous avez à faire est d’ajouter une classe à votre lien. Voici à quoi cela devrait ressembler:

 

<a class="button-blue" href="#">Blue Button Link</a>

Vous pouvez changer la couleur des boutons en changeant « button-blue » par « button-gray » ou « button-red » …. selon votre choix.

Ajouter un bouton de couleur CSS à votre feuille de style

Dans le fichier style.css de votre thème, placez le code suivant et modifiez-le si nécessaire:

/* Color Buttons
------------------------------------------------------------ */
 
.button-blue,
.button-gray,
.button-green,
.button-purple,
.button-red,
.button-yellow {
    color: #fff;
    padding: 5px 10px;
}
 
.button-blue:hover,
.button-gray:hover,
.button-green:hover,
.button-purple:hover,
.button-red:hover,
.button-yellow:hover {
    text-decoration: none;
}
 
.button-blue {
    background-color: #afcde3;
    border: 1px solid #afcde3;
}
 
.button-blue:hover {
    background-color: #83a2be;
    border: 1px solid #83a2be;
}
 
.button-gray {
    background-color: #bdbdbd;
    border: 1px solid #bdbdbd;
}
 
.button-gray:hover {
    background-color: #919191;
    border: 1px solid #919191;
}
 
.button-green {
    background-color: #b2ce96;
    border: 1px solid #b2ce96;
}
 
.button-green:hover {
    background-color: #86a36e;
    border: 1px solid #86a36e;
}
 
.button-purple {
    background-color: #bebde9;
    border: 1px solid #bebde9;
}
 
.button-purple:hover {
    background-color: #9291c7;
    border: 1px solid #9291c7;
}
 
.button-red {
    background-color: #e9b3b3;
    border: 1px solid #e9b3b3;
}
 
.button-red:hover {
    background-color: #c78787;
    border: 1px solid #c78787;
}
 
.button-yellow {
    background-color: #fadf98;
    border: 1px solid #fadf98;
}
 
.button-yellow:hover {
    background-color: #ecb870;
    border: 1px solid #ecb870;
}

C’est si simple. Allez-y, ajoutez des des boutons de colorés à votre site Web et démarquez-vous!


Vous aimerez également...

  • Comment changer le nom d’utilisateur Admin dans Wordpress (3 méthodes)
  • Ajouter une icône de site (favicon) à WordPress facilement
  • Capitaliser (mettre en Majuscule) les méta-titres du plugin Yoast SEO
  • 15 Astuces pour dépanner, optimiser et sécuriser votre site WordPress.
  • Comment faire des redirections 301 sous WordPress
  • Ajouter l’attribut nofollow aux liens externe de votre site
Accueil / Tutoriels / Ajouter des boutons colorés simple en css à votre site

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ne manquez plus rien
Abonnez-vous

Abonnez-vous dès maintenant à la Newsletters de Wpcours et recevez des tutoriels Gratuitement.

CREER VOTRE AVATAR GRATUIT

Articles récents

  • GeneratePress VS Genesis : Quel est le meilleur thème?
  • Est-ce que le contenu d’IA aide ou nuit à votre site web ?
  • Comment créer des boutons de partage social flottants dans GeneratePress sans plugin ?
  • Google Analytics 4 vs Universal Analytics : Comparaison complète 2023
  • Est ce que Google accepte le contenu généré par l’IA et ChatGPT ?