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.

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

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 :

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 :

Pour les autres, il vous suffit d’ajouter :

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

Brice Capobianco

Autodidacte passionné par WordPress. J'aime apprendre et créer pour ensuite partager…
Responsable commercial en agence web, je suis également développeur freelance WordPress à Rennes.

Coorganisateur des Meetups WordPress Rennes et fondateur de b-website.com.