• Passer à la navigation principale
  • Passer au contenu principal
  • Passer à la barre latérale principale
Wpcours

Wpcours

Des tuto, thèmes et plugins pour Wordpress

  • WORDPRESS
  • TUTORIELS
  • PLUGINS
  • WP-SEO
  • THEMES
  • Blogger
  • Contact
Accueil » Tutoriels » Ajouter des boutons colorés simple en css à votre site

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!


Plus de cours et exercices corrigés :

  • Supprimer le fichier Widget CSS Bundle sous blogger
  • Comment désactiver Google AMP en toute sécurité
  • Comment changer la couleur de la barre d’adresse du navigateur pour correspondre à votre site
  • Comment créer gratuitement un logo professionnel
  • Changer le nom et l’identifiant d’une catégorie dans Wordpress

Interactions du lecteur

Laisser un commentaire

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

Barre latérale principale

Ne manquez plus rien
Abonnez-vous

Abonnez-vous dès maintenant à la Newsletters de Wpcours et recevez des cours et exercices corrigés Gratuitement.

Articles récents

  • Limiter la longueur minimale et maximale ‎de vos commentaires sous Wordpress
  • Antispam Bee : meilleure configuration à faire
  • 7 outils numériques pour organiser votre travail
  • Top 4 meilleurs plugins RSVP gratuits pour WordPress
  • Comment utiliser des images WebP sur WordPress pour accélérer votre site

© 2022 ·Wpcours.com · Mentions · Contact