Si vous êtes néophyte, rassurez-vous : lorsque l'on parle de boutons en langage de "webmestre", il ne s'agit pas d'acné juvénile ou autre eczéma mais d'une sorte de bidule (qui n'a même pas, généralement, l'apparence d'un bouton, au sens courant du mot) utilisé pour couvrir un lien. Heu ... pas de malentendu : j'entends par couvrir le fait de remplacer un lien hypertexte pour des raisons esthétiques ! En fait, il s'agit d'un dessin, d'une image, d'une création graphique en général, qui remplacera un hypertexte afin de faire "plus joli".
Jusqu'il y a peu, c'est-à-dire jusqu'à l'arrivée des CSS, il était nécessaire d'en passer par un logiciel de PAO afin de créer une image avec l'extension .gif ou .jpeg pour créer l'un de ces fameux (fumeux ?) boutons. D'une part, il était donc indispensable de posséder un logiciel de retouches et d'autre part, il fallait être capable de s'en servir correctement. De plus, il circule régulièrement des rumeurs (probablement fondées) sur le W.W.W. faisant état d'une possible révolution dans l'usage des images créées en .gif pour des raisons purement mercantiles : droits d'auteur et droits d'utilisation.
Si vous désirez utiliser des effets de "rollover" sans pour autant avoir recours à un langage de script (JavaScript, VbScript, notamment), sans rechercher un effet graphique poussé, les FdS sont, ici aussi, faites pour vous ! Si vous avez suivi quelques exposés de cette rubrique consacrée aux feuilles de styles, vous en aurez certainement déjà vu quelques exemples. Afin de mieux cerner les possibilités offertes, en voici une série non exhaustive (limités à un effet de passage du curseur sur le lien) et leurs régles de styles :
Partant de l'effet le plus simple au plus évolué, sans pour autant en éxplorer toutes les ressources, vous pouvez remarquer que la palette des possibilités est très large ... et elle est loin d'être épuisée dans le tableau affiché ci-dessus. Fonds, couleurs, effets de relief, d'incrustation, etc ... peuvent être encore mis à toutes les sauces et ne demandent qu'à être exploités. Par ailleurs, rappelez-vous un exposé précédent relatif aux "fantaisies en 3 dimensions" : j'y démontrais la possibilité d'utiliser les "entités" pour créer des pseudo-graphiques. Vous pourrez y trouver d'autres sources d'inspiration pour créer vos boutons !
Les avantages de cette pratique :
Dois-je ajouter autre chose ?
Oui, sans doute : l'éternel (décidément, je me répète ...) problème des différences d'affichage des navigateurs ! Si la majorité de ceux-ci "comprend" vos règles de styles, certains, et non des moindres puisqu'ils se veulent les challengers de leur ennemi commun, Micro$oft, passent ici complètement à côté de la plaque ! En effet, sauf pour ce qui concerne les couleurs et une différence de dimensionnement des boutons lors de l'utilisation des combinaisons de propriétés padding et border, Mozilla (en tout cas au moins jusqu'à la version 1.0) et Netscape jusqu'à la version 7.2 se refusent à interpréter correctement les valeurs groove, outset et inset. C'est bien dommage car il s'agit des 3 valeurs les plus spectaculaires (si l'on peut dire ...) dans l'élaboration des pseudo-boutons ... Rassurez-vous toutefois : il est possible de pallier partiellement à cet inconvénient en attribuant des couleurs à ces valeurs.
Force est de constater que, dans ce cas, le "géant" actuel du Web passe l'épreuve en grand vainqueur, affichant vos jolis boutons de manière parfaite, du moins à partir de sa version 5.5 ! Ne vous privez donc pas de cette technique : il est très probable que les "autres" suivront bientôt.
A vous de jouer ! Laissez votre imagination et votre créativité vous guider !