Boutons CSS

Je vous propose aujourd'hui un petit tutoriel pour créer ses propres boutons colorés en CSS !

Pas besoin d'image, un petit effet quand survolé par la souris, simple à réaliser et à personnaliser.
C'est parti pour les explications !

Introduction

Avant tout je vous conseil de lire le 1er tutoriel sur la barre de navigation qui explique les bases du HTML, et celui sur la personnalisation de la barre de navigation qui explique les bases du CSS ;)
Dans ce tutoriel nous allons créer des liens HTML et personnaliser leur apparence en CSS afin de créer des boutons :)

Création des boutons en HTML

Pour créer les boutons, cliquez sur Mise en page dans le menu à gauche du tableau de bord :

Ensuite cliquez sur Ajouter un gadget :

Choisissez le gadget HTML/Java Script :

Une boite de dialogue s'ouvrira comme celui-ci :

Passons maintenant à la création des boutons sous forme de liens HTML.
Ces liens HTML vont se présenter sous la forme :
<a href="http://adressedulien.com" id="motclé" target="_blank">Texte du lien</a>Où :

• a href="http://adressedulien.com" correspond à l'adresse du lien quand on clique dessus
• id="motclé" est un mot clé qui va nous servir pour identifier le bouton lors de sa personnalisation
• target="_blank" permet d'ouvrir le lien dans une nouvelle fenêtre
• Texte du lien est le texte du lien affiché

Dans cet exemple nous allons créer 3 boutons :

• Un bouton qui renvoi vers Pinterest
• Un bouton qui renvoi vers Instagram
• Un bouton qui permet d'être contacté par e-mail

Pour le 1er bouton qui renvoi vers Pinterest on a :

• adresse du lien : http://pinterest.com/
• mot clé : btnCSS_P par exemple (P pour Pinterest)
• Texte du lien : Pinterest

Ce qui donne :
<a href="http://pinterest.com/" id="btnCSS_P" target="_blank">Pinterest</a>
Pour le 2e bouton qui renvoi vers Instagram on a :

• adresse du lien : http://instagram.com/
• mot clé : btnCSS_I par exemple (I pour Instagram)
• Texte du lien : Instagram

Ce qui donne :
<a href="http://instagram.com/" id="btnCSS_I" target="_blank">Instagram</a>
Pour le 3e bouton qui permet d'être contacté par e-mail on a :

• adresse du lien : mailto:email@mail.fr (remplacer email@mail.fr par son adresse e-mail)
• mot clé : btnCSS_mail par exemple
• Texte du lien : Contact

Ce qui donne :
<a href="mailto:email@mail.fr" id="btnCSS_mail" target="_blank">Contact</a>
Tous ces liens vont être écrits à la suite dans ce qu'on appelle une div. C'est comme une boite invisible sur la page web qui va permettre de regrouper nos liens. On écrit donc :
<div id="btnCSS">
<a href="http://pinterest.com/" id="btnCSS_P" target="_blank">Pinterest</a>
<a href="http://instagram.com/" id="btnCSS_I" target="_blank">Instagram</a>
<a href="mailto:email@mail.fr" id="btnCSS_mail" target="_blank">Contact</a>
</div>Notez que la div porte elle aussi un mot clé btnCSS pour pouvoir l'identifier lors de la personnalisation.
On écrit tout ceci dans la boite de dialogue dans la partie Contenu. N'écrivez rien dans la partie Titre. Et cliquez sur Enregistrer :

Vous pouvez ensuite déplacer le gadget selon la disposition souhaitée sur le blog :

Personnalisation des boutons en CSS

La prochaine étape consiste à personnaliser nos boutons en définissant entre autres :

• La police du texte
• La couleur du texte
• La couleur du fond

Pour cela, cliquez sur Modèle dans le menu à gauche :

Puis sur Personnaliser :

Cliquez sur Avancé dans le menu de gauche :

Puis sur Ajouter le fichier CSS tout en bas de la liste proposé :

Une boite blanche apparaît sur la droite. C'est ici que nous allons entrer le code CSS pour personnaliser nos boutons.
Comme expliqué dans le tutoriel pour personnaliser sa barre de navigation, un code CSS se présente sous la forme :
.nom {
propriété-1: valeur;
propriété-2: valeur;
}Où :

• .nom désigne l'élément dont on veut définir les propriétés visuelles.
• propriété est la propriété dont on défini la valeur.
  Exemple : pour la propriété couleur on défini la valeur rouge.

Petit rappel des règles à respecter quand on écrit en CSS :

• Les propriétés visuelles de l'élément sont toujours entourées de 2 crochets { et }
• Ne jamais mettre d'espace avant les ":" et les ";" !
• Toujours finir une ligne de valeurs avec un point-virgule ";" sans espace après !

Pour bien comprendre les propriétés utilisés je vous conseil de lire le tutoriel sur la personnalisation de la barre de navigation qui explique comment personnaliser des liens en CSS.
Commençons par personnaliser la div qui contient nos boutons, en utilisant son mot clé btnCSS.
Dans cet exemple, on lui définit :

• aucun fond
• pas de bordure
• texte centré (center)
• une marge de 20 pixels (20px) en dessous de la div

On écrit donc :
#btnCSS {
background: none;
list-style: none;
list-style-image: none;
list-style-position: outside;
border-width: 0;
text-align: center;
background-image: none;
margin-bottom: 20px;
}On définit ensuite l'aspect des liens. Dans cet exemple les liens sont :

• en police Trebuchet MS
• de taille 12 pixels (12px)
• en majuscules (uppercase)
• avec un espacement de 1 pixel (1px) entre les lettres
• de couleur blanc (#ffffff)

On écrit en CSS :
#btnCSS a {
font-family: Trebuchet MS;
font-size: 12px;
font-style: none;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
display: block;
color: #ffffff;
}Maintenant on définit l'aspect de chaque bouton. Pour cela on utilise son mot clé.
Dans cet exemple, le bouton Pinterest (mot clé : btnCSS_P) a :

• un fond de couleur bleu (#6CBFA9)
• une marge de 3 pixels en dessous du bouton (margin)
• un espace de 3 pixels au dessus et en dessous du texte qui définissent la largeur du bouton (padding)

On écrit donc :
a#btnCSS_P {
background-color: #6CBFA9;
margin-bottom: 3px;
padding-top: 3px;
padding-bottom: 3px;
}On fait de même pour les autres boutons en changeant la couleur du fond pour chaque bouton : vert pour Instagram (#AFD45A) et gris pour le contact par e-mail (#8B8E93).
Ce qui donne :
a#btnCSS_I {
background-color: #AFD45A;
margin-bottom: 3px;
padding-top: 3px;
padding-bottom: 3px;
}et
a#btnCSS_mail {
background-color: #8B8E93;
margin-bottom: 3px;
padding-top: 3px;
padding-bottom: 3px;
}Pour finir on peut ajouter un petit effet quand on survole le bouton. Dans cet exemple, l'opacité du fond des boutons est réduit à 80% au lieu de 100%. Le fond est donc légèrement plus clair quand on survole le bouton avec la souris.
Pour cela il faut ajouter le code CSS suivant :
a#btnCSS_P:hover, a#btnCSS_I:hover, a#btnCSS_mail:hover {
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}
Le code CSS au complet est :
#btnCSS {
background: none;
list-style: none;
list-style-image: none;
list-style-position: outside;
border-width: 0;
text-align: center;
background-image: none;
margin-bottom: 20px;
}
#btnCSSa{
font-family: Trebuchet MS;
font-size: 12px;
font-style: none;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
display: block;
color: #ffffff;
}
a#btnCSS_P {
background-color: #6CBFA9;
margin-bottom: 3px;
padding-top: 3px;
padding-bottom: 3px;
}
a#btnCSS_I {
background-color: #AFD45A;
margin-bottom: 3px;
padding-top: 3px;
padding-bottom: 3px;
}
a#btnCSS_mail {
background-color: #8B8E93;
margin-bottom: 3px;
padding-top: 3px;
padding-bottom: 3px;
}
a#btnCSS_P:hover, a#btnCSS_I:hover, a#btnCSS_mail:hover {
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}Copier le code CSS au complet dans la boîte de dialogue blanche comme ceci :

Puis enregistrez en cliquant sur Appliquer au blog en haut à droite de la page web :

Et voilà ! Vous avez créé vos propres boutons CSS !

N'hésitez pas à personnaliser la police, la couleur du texte de liens et des fonds selon vos goûts !
S'il y a des points que vous avez eu du mal à comprendre, je vous conseil de lire ces 2 articles :

• La barre de navigation partie 1 : création de liens en HTML
• La barre de navigation partie 2 : bases du CSS

N'hésitez pas si vous avez des questions ;)