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
- 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 :
Où :<a href="http://adressedulien.com" id="motclé"target="_blank">Texte du lien</a>
- 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 :
Pour le 2e bouton qui renvoi vers Instagram on a :<a href="http://pinterest.com/" id="btnCSS_P" target="_blank"></a>
- adresse du lien : http://instagram.com/
- mot clé : btnCSS_I par exemple (I pour Instagram)
- Texte du lien : Instagram
Ce qui donne :
Pour le 3e bouton qui permet d'être contacté par e-mail on a :<a href="http://instagram.com/" id="btnCSS_I" target="_blank"></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 :
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 :<a href="mailto:email@mail.fr" id="btnCSS_mail" target="_blank">Contact</a>
Notez que la div porte elle aussi un mot clé btnCSS pour pouvoir l'identifier lors de la personnalisation.<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>
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 :
Où :.nom {propriété: valeur;propriété: valeur; }
- .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 :
On définit ensuite l'aspect des liens. Dans cet exemple les liens sont :#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; }
- 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 :
Maintenant on définit l'aspect de chaque bouton. Pour cela on utilise son mot clé.#btnCSSa { font-family: Trebuchet MS; font-size: 12px; font-style: none; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; display: block; color: #ffffff; }
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 :
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).a#btnCSS_P{ background-color: #6CBFA9; margin-bottom: 3px; padding-top: 3px; padding-bottom: 3px; }
Ce qui donne :
eta#btnCSS_I{ background-color: #AFD45A; 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.a#btnCSS_mail{ background-color: #8B8E93; margin-bottom: 3px; padding-top: 3px; padding-bottom: 3px; }
Pour cela il faut ajouter le code CSS suivant :
Le code CSS au complet est :a#btnCSS_P:hover, a#btnCSS_I:hover, a#btnCSS_mail:hover { -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; }
#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;
}
#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;
}
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;
}
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 ;)
