Quand on clique sur "commentaires"... Part Three

Dernier épisode de la PartieCommentairüngSaga (clin d'oeil à Walsong et à son premier opéra farfelu), le plus facile - ça tombe bien, il est tard -
les liens Ajouter un commentaire et Ajouter un trackback :

Ils sont commandés par deux fonctions simples : .linkcomment et .linkTrackback.

Les personnaliser est donc plutôt facile; vous pouvez changer la couleur et l'aspect de la police, mais aussi les transformer en boutons.
Deux options: soit mettre un font en forme de bouton, que vous pouvez créer par exemple sur ce site:

http://www.grsites.com/button/

Il faut cependant bien comprendre qu'on peut pas modifier le texte en lui-même, puisqu'il est implémenter dans le partie HTML du code du blog, auquel nous n'avons pas accès. Il faut donc créer un bouton "vierge", vide de texte, qui sera mis en background-image de .linkcomment et de .linkTrackback.
Comme il d'agit de deux fonctions distinctes, il est tout à fait possible d'en faire deux différents.
Ainsi, par exemple, vous créez un bouton de 200px de large et de 50Px de haut :

et vous l'insérez dans
.linkcomment {
background: url(http://idata.over-blog.com/0/05/85/46/utilitaires/buttonvide.jpg) no-repeat center left;
width:200px;
 height: 50px;
padding: 25px 50px 25px 50px;
}
Le padding est nécessaire pour avoir le bouton en entier et le texte bien centré au milieu; il doit être adapté à la dimension du bouton. N'hésitez pas à faire des tests.

Résultat:

Ajouter un commentaire

(enfin, en mieux, parce que, là, dans le texte, c'est pas évident à reproduire, si vous n'avez pas le même navigateur que moi, soyez indulgents...)

Autre possibilité, celle que j'ai choisie pour l'instant (mais sait-on jamais...), pas d'image en background, mais un effet "bouton" grâce aux borders.

.linkcomment{
border: outset #EEC591;
background-color: #code_couleur;
...
}
Ici le "bouton" est délimité par une bordure en relief vers l'extérieur  (border: outset #EEC591;), le code couleur  #EEC591 désignant la couleur claire de la bordure.
L'avantage ?
On peut facilement reconfigurer le bouton au passage de la souris avec le désormais connu :hover de façon à créer un effet d' "enfoncement" en choisissant une bordure de type inset, c'est-à-dire un relief vers l'intérieur:

.linkcomment:hover{
border: outset #EEC591;
 }

Bien sûr, tout ceci ne sont que des exemples de ce que vous pouvez faire, à vous d'imaginer votre propre design pour ces deux liens, pas nécessairement sous forme de boutons, c'est très conventionnel, un bouton, après tout, l'important étant qu'ils donnent envie de cliquer dessus pour qu'on vous le laisse, ce commentaire bien mérité ...

On est au bas de la page, ouf : Fin du troisième et dernier acte !

Alors vous savez ce qu'il vous reste à faire pour me requinquer après tout ce travail herculéen:

Cliquez là ->

Ajouter un commentaire

(Si, si là au-dessus, allez-y, cliquez...)