[AUTOMATIQUE] Cet article a plus de 5 ans.
Il se peut donc que les informations qu'il fournit ne soient plus totalement exactes.

Sur WordPress et dans d’autres CMS, les tags, nuages et autres confrères sont de plus en plus utilisés.

Plutôt que d’avoir une simple liste de mots clés ce succédant virgule après virgule, je vais vous expliquer comment en faire de petits boutons grâce au CSS3.

Pour voir le résultat final, il vous suffit de descendre en bas de ce tutoriel pour y voir ma zone de tags.

Création du bouton

Voici le code CSS que nous allons utiliser. Il est placé dans votre fichier CSS.

.bouton_tag{
background: url('img/bouton.PNG') #d7ebef;
margin:4px;
display: inline-block;
padding: 5px 10px 6px;
text-decoration: none;
font-weight: bold;
line-height: 1;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
-o-border-radius: 7px;
-ms-border-radius: 7px;
border-radius: 7px;
-moz-box-shadow: 0 1px 2px #999;
-webkit-box-shadow: 0 1px 2px #999;
-o-box-shadow: 0 1px 2px #999;
-ms-box-shadow: 0 1px 3px #999;
box-shadow: 0 1px 2px #999;
text-shadow: 0 -1px 1px #666;
border-bottom: 1px solid #222;
cursor: pointer;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-o-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-ms-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
font-size: 11px;
}

Petite explication détaillée pour les novices en CSS :

  • .bouton_tag { La class que nous allons utiliser
  • background: url(‘img/bouton.PNG’) #d7ebef; La couleur de l’arrière-plan et une petite image transparente en dégradé (pas obligatoire)
  • margin:4px; La marge entre les boutons
  • display: inline-block; Attributs du bloc : « inline » pour garder l’attribut du texte et « bloc » pour pouvoir ajouter la marge extérieur
  • padding: 5px 10px 6px; La marge intérieur entre le texte et le bord du bouton
  • text-decoration: none; Le texte n’est pas en majuscule
  • font-weight: bold; Le texte est en gras
  • line-height: 1; Important, ça dit bien que le bouton fait une ligne max en hauteur !
  • -moz-border-radius: 7px; La taille de l’arrondi pour FIREFOX
  • -webkit-border-radius: 7px; La taille de l’arrondi pour SAFARI et CHROME
  • -o-border-radius: 7px; La taille de l’arrondi pour OPERA
  • -ms-border-radius: 7px; La taille de l’arrondi pour IE (en principe…)
  • border-radius: 7px; La taille de l’arrondi pour les autres
  • -moz-box-shadow: 0 1px 2px #999; La taille, le positionnement et la couleur de l’ombre pour FIREFOX
  • -webkit-box-shadow: 0 1px 2px #999; La taille, le positionnement et la couleur de l’ombre pour SAFARI et CHROME
  • -o-box-shadow: 0 1px 2px #999; La taille, le positionnement et la couleur de l’ombre pour OPERA
  • -ms-box-shadow: 0 1px 3px #999; La taille, le positionnement et la couleur de l’ombre pour IE (toujours en principe…)
  • box-shadow: 0 1px 2px #999; La taille, le positionnement et la couleur de l’ombre pour les autres
  • text-shadow: 0 -1px 1px #666; La taille, le positionnement et la couleur de l’ombre du texte
  • border-bottom: 1px solid #222; La taille et la couleur de la bordure inférieur du bouton
  • cursor: pointer; Notre souris restera un pointer et non une mains, même sur le lien
  • -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); La taille, le positionnement et la couleur de l’ombre pourFIREFOX en RGBA (option)
  • -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); La taille, le positionnement et la couleur de l’ombre pour SAFARI et CHROME en RGBA (option)
  • -o-box-shadow: 0 1px 3px rgba(0,0,0,0.5); La taille, le positionnement et la couleur de l’ombre pour OPERA en RGBA (option)
  • -ms-box-shadow: 0 1px 3px rgba(0,0,0,0.5); La taille, le positionnement et la couleur de l’ombre pour IE en RGBA (option)
  • box-shadow: 0 1px 3px rgba(0,0,0,0.5); La taille, le positionnement et la couleur de l’ombre pour les autres en RGBA (option)
  • text-shadow: 0 -1px 1px rgba(0,0,0,0.25); La taille, le positionnement et la couleur de l’ombre du texte en RGBA (option)
  • border-bottom: 1px solid rgba(0,0,0,0.25); La taille et la couleur de la bordure inférieur du bouton en RGBA (option)
  • font-size: 11px;  La taille de la police

Voilà, j’espère que vous avez bien compris à quoi servait tout ce code assez volumineux pour un si petit bouton. Le problème est qu’il s’agit de CSS3, et qu’il n’est pas encore parfaitement pris en compte par tous les navigateurs. Du coup, il faut préciser dans notre code quoi faire pour quel navigateur.

Un petit effet sur notre bouton

Bon, notre bouton est fait en CSS, maintenant, nous allons aller un peu plus loin et notamment nous servir de :hover dans CSS.

Dans le code ci-dessus, nous avons ajoutez une ombre à notre bouton, ce qui lui donne un effet de relief sur notre page. Nous allons maintenant faire en sorte que ce bouton s’enfonce lorsque la souris va passer dessus (comme dans mes tags à la fin de l’article).

La démarche est simple, on va recopier tout notre code CSS juste en dessous et ajouter :hover derrière notre class (nous allons aussi ajouter focus et active pour des raisons d’accessibilités). Nous obtiendrons alors

.bouton_tag:hover, .bouton_tag:focus, .bouton_tag:active{
...
}

Nous allons ensuite supprimer tout ce que nous ne voulons modifier dans le comportement de notre bouton lorsque la souris sera dessus.

On obtient ainsi :

.bouton_tag:hover, .bouton_tag:focus, .bouton_tag:active{
-moz-box-shadow: 0 1px 2px #f2f2f2;
-webkit-box-shadow: 0 1px 2px #f2f2f2;
-o-box-shadow: 0 1px 2px #f2f2f2;
-ms-box-shadow: 0 1px 3px #f2f2f2;
box-shadow: 0 1px 2px #f2f2f2;
border-bottom: 1px solid #999;
background-color: #e3f2f5;
color:#666;
}

On a donc changé certaines choses, comme la couleur des ombres pour qu’elles soient plus discrètes, la couleur de la police, la couleur de la bordure du bas et surtout la couleur de l’arrière-plan.

Notre effet « bouton enfoncé » est réussi !

Intégration dans votre page

Maintenant que notre CSS est créé, il nous faut ajouter dans notre HTML la class bouton_tag aux liens que nous voulons. Dans notre cas c’est au niveau des TAGs. Pour ma part, j’utilise le plugin WordPress Simple Tag. Dans les options de ce plugin il très facile d’ajouter ce que nous voulons lors de la génération des liens dans les pages. Il suffit d’aller dans l’onglet « Mots clés de l’article courant » et changer « Format des liens des mots clefs » par :

<a class="bouton_tag" title="%tag_name%" href="%tag_link%">%tag_name%</a>

Pour les autres, il vous suffit d’ajouter :

...class="bouton_tag"...

Voilà, j’espère avoir été suffisamment claire. N’hésitez pas à poser des questions !

Article rédigé parBrice CAPOBIANCO

Autodidacte passionné par WordPress. J'aime apprendre et créer pour ensuite partager !

Coorganisateur des Meetups WordPress Rennes et fondateur de bweb.
Partager cet article

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Afficher les 2 commentaires

2 commentaires

  1. Merci Gilles !
    Dans mon cas, l’image fait 1px de largeur et est un simple dégradé de noir vers transparent (avec une opacité très faible).
    Tu peux très facilement réaliser ce type de couleur de boutons en rgba, il existe de nombreux générateurs très bien fait !
    Moi j’ai choisi la solution de facilité…