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

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:

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!