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...

  • 14 méthodes pour améliorer la vitesse de votre site WordPress
  • Boutons de partages avec compteur pour blogger
  • Corriger les erreurs de Sitemap WordPress dans la console de recherche Google ?
  • Ajouter Google Authorship à votre site
  • Ajouter mini boutons de suivi avec effet flip à votre blog
  • 15 codes pour optimiser votre fichier .htaccess

Classé sous :Tutoriels

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

  • 5 façons pour trouver la clé de produit (serial) Windows facilement
  • Ajouter une Image mise en avant (featured image) sous le titre de vos article
  • 13 thèmes WordPress polyvalents pour sites des crypto-monnaies pour obtenir un site bien classé
  • C’est quoi l’API WordPress Heartbeat et pourquoi devriez-vous la contrôler ?
  • Créer un message d’incitation à réautoriser les annonces Adsense sans plugin

© 2023 ·Wpcours.com · Mentions · Contact