Les boutons dynamiques

Nous commençons à obtenir une page sympa, ne nous arrêtons pas là !

Pour voir la feuille CSS, clique sur le lien suivant :

feuille.css
L'aspect dynamique d'un site internet est important. Voici donc la méthode pour créer des boutons dynamiques tout simplement grâce aux CSS... On pourrait le faire en javascript, mais c'est une très mauvaise idée : de nombreuses personnes le désactivent et n'auront que des boutons inertes, tandis que ça se fait tout simplement en CSS (passez le curseur au dessus des boutons du menu pour voir le résultat !) :

Code CSS	Explication et utilisation
.sebeto a { display: block; text-align: center; border: none; font-weight: bold; font-size: 11px; text-decoration: none; padding: 3px 0px 0px 0px; margin: 10px 4px 10px 4px; background-image: url('bouton.png'); width: 150px; height: 19px; color: #670018; }	Cela va s'appliquer à tout lien pour lequel nous appliquerons la classe concernée : `<div class="sebeto"> <a href="blabla.html">Blabla</a> </div>` Il faut bien évidemment avoir deux images : `bouton.png` pour le bouton sorti, et une deuxième pour le bouton pressé... `text-decoration: none;` permet de faire en sorte que l'écriture du lien ne soit pas soulignée sur le bouton... On peut bien entendu utiliser avec un Id : mettre # au lieu du point (comme pour le menu de gauche dans mon cas : `#menu a`)
.sebeto a:hover { background-image: url('bouton2.png'); color: #FFFFFF; }	Cette seconde définition correspond au lien quand on le survole... On se contente tout simplement de changer l'image et la couleur du texte...

http://www.esperantomondo.net, samedi 02 février 2008, 23:51 - Site fait par Sebeto