Suite à l'installation du nouveau design, le blog peut encore présenter quelques erreurs, ou bugs d'affichage. Merci de votre compréhension.

Créer des boutons CSS

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

Créer des boutons 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éation des boutons en HTML

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

Créer des boutons CSS

Ensuite cliquez sur Ajouter un gadget :

Créer des boutons CSS

Choisissez le gadget HTML/Java Script :

Créer des boutons CSS

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

Créer des boutons CSS

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 :

Créer des boutons CSS

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

Créer des boutons CSS


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 :

Créer des boutons CSS

Puis sur Personnaliser :

Créer des boutons CSS

Cliquez sur Avancé dans le menu de gauche :

Créer des boutons CSS

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

Créer des boutons CSS

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é: valeur;
propriété: 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;
}

#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;
}
Copier le code CSS au complet dans la boîte de dialogue blanche comme ceci :

Créer des boutons CSS

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

Créer des boutons CSS

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

Créer des 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 :
N'hésitez pas si vous avez des questions ;)

Autres articles

39 commentaires:

  1. Cet article tombe à PIC !! J'avais justement prévu de refaire mes catégories sur le blog :D
    Tu m'as donc grandement facilité la tâche avec ce tuto.
    Un tout grand merci pour cette aide précieuse :D

    RépondreSupprimer
  2. Votre blog est ravissant!

    RépondreSupprimer
  3. Depuis hier, je suis sur ton blog, incroyable le boulot effectué, c'est clair, efficace et fait avec gout :)
    Bravo et merci !

    RépondreSupprimer
  4. Tu es une sauveuse! Un infini merci, grâce à toi et tes super tutos j'ai pu donner à mon blog l'apparence voulue :) Encore merci!

    Maëva
    http://blackhairblackdress.blogspot.fr/

    RépondreSupprimer
  5. Merci beaucoup pour tes articles clair et précis ! :)

    RépondreSupprimer
  6. Encore un super tuto, voilà deux jours que je suis sur ton blog et je suis impressionnée par tes explications et ton boulot!

    RépondreSupprimer
  7. Mais c'est génial !!! J'ai tout compris et ça fait vraiment beau sur le blog !

    RépondreSupprimer
  8. Merci! Excellent tuto! Et comme d'hab', merci de nous expliquer comment ça fonctionne! Grâce à toi, on a les bases pour réaliser et personnaliser nos propres boutons ;D Merci pour ton aide qui nous est précieuse! :-)

    RépondreSupprimer
  9. Tout a fonctionné! :) mais j'ai une petite question, quand on veut le modifier par la suite, il faut à chaque fois retaper le code CSS ou on peut le retrouver pour le modifier (mais du coup, si c'est possible, comment? ^^)
    Merciiiiiii! :D

    RépondreSupprimer
    Réponses
    1. Salut Claire,

      Pas besoin de retaper le code à chaque fois. En plus le navigateur serait perdu s'il avait 3 fois le même code avec des valeurs différentes.

      Pour retrouver le code va dans Modèle à partir de ton tableau de bord puis clique sur Modifier le code HTML. Clique sur le triangle noir à gauche de <b:skin>...</b:skin> puis clique n'importe où dans la boîte de code. Appuie sur Ctrl et F en même temps.
      Dans la boîte de recherche qui apparaît en haut à droite colle la 1ère ligne du code que tu veux changer.

      Par exemple :

      #btnCSS {

      ou

      a#btnCSS_P:hover, a#btnCSS_I:hover, a#btnCSS_mail:hover {

      Appuie ensuite sur Entrer pour retrouver le code correspondant ;)

      Supprimer
    2. aaaaaah merciiiiiiii! merci pour ton temps et ton aide! :D

      Supprimer
  10. Salut! Je voudrais réaliser plus ou moins la même choses pour mes boutons de partages de chaque article, donc moi je réalise mon bouton sur illustrator mais après, ça fait plusieurs jours que je cherche et impossible de trouver le code pour l’intégrer à mes images ... une idée ? :( idem avec le bouton instagram (qui se met sur chaque image) je voudrais le remplacer par le mien ....

    RépondreSupprimer
    Réponses
    1. Bonjour,
      C'est parce que pour changer les images des boutons de partage il ne faut pas utiliser les boutons de partage de Blogger. Il faut les supprimer et ajouter des codes à son thème ce qui est plus compliqué :/
      Je propose ce service dans le pack de modification pour Blogger à 20 €. Normalement il comprend la création des images mais si tu les as déjà créé, ça entre dans le pack à 10 € :)
      Voici le lien vers les packs : http://ladybirdr.blogspot.fr/p/prestations.html

      Supprimer
  11. Bonjour bonjour !

    Tes tutos sont vraiment au top, merci de partager toutes ces astuces avec nous !
    Cependant j'ai un petit souci : je souhaitai réduire l'espace entre mes deux rectangles et j'ai donc diminué la marge mais même en faisant "margin-bottom: 1px;" l'espace ne se réduit pas. Est-ce à un autre endroit ?

    Merci beaucoup encore une fois et bonne semaine !!

    RépondreSupprimer
    Réponses
    1. Bonjour Marie, si tu souhaites supprimer complètement l'espace entre les rectangles tu peux définir une espace de 0, comme ceci :

      margin-bottom: 0;

      Si tu as également une ligne dans ton code CSS qui commence par :

      margin-top:

      Alors il faut aussi que tu changes la valeur à cette ligne car elle correspond à l'espace au-dessus des rectangles :)

      Supprimer
  12. Bonjour !
    Ayant debuté recemment avec mon blog , tes tutos m'ont vraiment aidé , et je voulais savoir si on pouvait faire un boutons css pour twitter et comment ?
    Merci :)

    RépondreSupprimer
    Réponses
    1. Bonjour Chloé,
      Tu peux utiliser le code HTML et CSS d'un bouton déjà créé (Pinterest par exemple), en changeant le Texte du lien et le mot-clé dans le code HTML :

      <a href="http://adressedulien.com" id="motclé" target="_blank">Texte du lien</a>

      Il faut juste faire attention à utiliser le même mot-clé dans le code CSS associé à ce bouton (remplace nom par le même mot-clé) :

      .nom {
      propriété: valeur;
      propriété: valeur;
      }

      Et voilà ;)

      Supprimer
  13. Merci d'avoir repondu catherine :) je voulais juste savoir un petit truc j'essaie de desactiver mes propres vues sur mon blog mais ca ne marche pas on les voit toujours tu sais comment faire pour regler ce probleme ? J'utilise une tablette samsung android

    RépondreSupprimer
    Réponses
    1. Bonjour Chloé, pour désactiver tes vues il faut aller dans Statistiques à partir de ton tableau de bord. Ensuite clique sur "Désactiver le suivi de mes propres consultations de pages" en dessous des nombres de pages vues.
      Clique sur "Désactiver le suivi de mes propres consultations de pages" puis sur Enregistrer. Et voilà.

      Supprimer
    2. Malheuresment ca ne marche pas j'ai cliquer sur desactiver mes propres vues et ca ne fonctionne pas :( je ne sais pas quoi faire car c'est embetant

      Supprimer
  14. (re) Bonjour !
    Est-il possible de mettre des images ( que j'ai fait moi même ) à la place des textes ?

    Merci!

    RépondreSupprimer
    Réponses
    1. Bonjour Aurore,
      Oui tout à fait, il suffit de remplacer le texte par ceci :

      <img src="http://adresseurl.com/image.png" alt="texte alternatif" />

      Remplace :

      http://adresseurl.com/image.png

      Par l'adresse URL de ton image. Pour obtenir une adresse URL tu peux suivre ces indications sur Blogger : http://ladybirdr.blogspot.fr/2015/06/remplacer-le-lien-lire-la-suite-par-une.html#add

      Remplace ensuite :

      texte alternatif

      Par un texte de secours qui s'affiche seulement si l'image n'a pas pu être chargé ;)

      Supprimer
  15. Comment faut-il faire pour déplacer les boutons des réseaux sociaux dans la barre de menu?
    Merci
    Abby

    RépondreSupprimer
    Réponses
    1. Bonjour Abby,
      Je n'ai pas encore écris de tuto sur le sujet, mais c'est prévu ;)

      Supprimer
  16. Bonjour Catherine,
    Encore une fois un grand merci pour ton tuto. Décidément, ton blog est une mine d'infos :) Merci beaucoup !

    RépondreSupprimer
  17. Bonjour Catherine,
    Merci beaucoup pour ce tuto formidable ! Ton blog m'aide énormément dans la création du mien.
    J'ai par contre, une petite question. Connais-tu la plateforme Wattpad ? C'est une communauté de personnes qui publient leurs écrits (ce ne sont pas des professionnels). Saurais-tu ce qu'il faut que je marque pour que le bouton Wattpad apparaisse ?

    Merci beaucoup d'avance, quelque soit la réponse,
    Ambre

    RépondreSupprimer
    Réponses
    1. Bonjour Ambre,
      Je ne connais pas la plateforme Wattpad, mais en allant sur leur site j'ai trouvé les instructions pour ajouter un bouton ici : http://blog.wattpad.com/2014/05/30/its-time-to-get-noticed-wattpadders/
      C'est en anglais par contre.

      Supprimer
  18. coucou!

    je voulais savoir si tu sais comment on peut mettre un hover texte sur l'image?
    J'ai créé mes icones à partir d'une image mais je voulais mettre un texte correspond au survol de la souris.

    merci pour ton aide :D
    Bisous

    RépondreSupprimer
    Réponses
    1. Bonjour Aurélie,
      Je note l'idée d'en faire un tutoriel ;)

      Supprimer
  19. Bonsoir Catherine,
    Je suis en train de faire mes boutons mais j'ai un problème : la couleur de fond n'apparaît pas !!
    Je te laisse mon adresse : biancojustine.blogspot.com
    Merci à toi !!!
    Justine

    RépondreSupprimer
    Réponses
    1. Bonjour Justine,
      Le lien vers ton blog ne marche pas :/

      Supprimer
  20. Merci pour ton tuto ! J'ai cependant un petit problème: lorsque j'effectue les modifications, la dernière lettre du mot du bouton css se décale toujours pour atterrir une ligne plus bas. Comment la "forcer" à rester à la même ligne ?
    Merci d'avance.

    RépondreSupprimer
  21. C'est bon catherine ! J'ai réussi à régler le problème toute seule en bidouillant un peu :)
    Merci quand même !

    RépondreSupprimer
  22. Est ce que tu pourrais m'aider ? Je n'arrive plus a la faire je ne sais pas pourquoi, je fais comme dans le tuto mais les liens restent et il n'y a pas de bouton :/

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Essaye de coller les codes CSS dans le gadget HTML, juste après les codes HTML de tes liens, en ajoutant :

      <style type='text/css'>

      Avant les codes CSS, et :

      </style>

      Après les codes CSS

      Supprimer
  23. Bonjour Cath' !

    Merci énormément pour ton tuto, ça embellit le blog simplement. Par contre, pour ma part, les titres ne sont pas centrés... Comment faire ?
    Bisous !

    RépondreSupprimer
    Réponses
    1. Bonjour Angie,
      Peux-tu me donner le lien de ton blog ? Merci ;)

      Supprimer

Le blog est officiellement en PAUSE. Je ne pourrai PAS répondre à vos commentaires. Pour plus d'infos.

Vérifiez que la réponse à votre problème ne se trouve pas déjà dans les commentaires ;)

Lady Bird RedDesign et contenu par Catherine Surr
Mentions légales . Un blog créé sur Blogger