< CSS / créer des boutons avec les feuilles de style >
Voici comment créer simplement des effets de boutons avec les instructions des feuilles de styles.
Utiliser un div
Pour créer un bouton, le plus simple est souvent d’utiliser un tag <div>, et de mettre le contenu du div en lien <a href>.
.bouton {
border: 1px #666 dashed;
margin: 5px;
width: 120px;
text-align: center;
padding:5px;
background: #ccc url('/images/graychalk.jpg');
color: #000;
}
</style>
<div class="bouton"><a href="http://www.metacites.net/">MetaCités</a></div>
<div class="bouton"><a href="http://www.multipass.net/">Multipass</a></div>
Comme vous avez pu le constater, le plus simple est encore de définir une classe ".bouton".
Problème : comment rendre le div entièrement clickable ?
Le problème des deux boutons ci-dessus, est que seuls la partie texte est cliquable.
Pour y remèdier, il suffit d’introduire un peu de JavaScript :
<div class="bouton" onclick="document.location='http://www.multipass.net/'"><a href="http://www.multipass.net/">Multipass</a></div>
Et un effet de roll-over ?
Nous allons maintenant ajouter un effet de roll-over pour : 
changer l’aspect du bouton lorsque la souris est dessus transformer le pointeur de la souris en la main qui caractérise les zones cliquables
Cette fois-ci, le javascript sera plus conséquent, et nous allons définir deux classes :
.bouton2 {
border: 1px #666 dashed;
margin: 5px;
width: 120px;
text-align: center;
padding:5px;
background: #ccc url('/images/graychalk.jpg');
cursor: default;
}
.bouton2-over {
border: 1px #666 dashed;
margin: 5px;
width: 120px;
text-align: center;
padding:5px;
background: #eee url('/images/graychalk3.jpg');
cursor: pointer;
}
</style>
<div class="bouton2"
onclick="document.location='http://www.metacites.net/'"
onmouseover="this.className = 'bouton2-over';"
onmouseout="this.className = 'bouton2';">
<a href="http://www.metacites.net/">MetaCités</a>
</div>
<div class="bouton2"
onclick="document.location='http://www.multipass.net/'"
onmouseover="this.className = 'bouton2-over';"
onmouseout="this.className = 'bouton2';" >
<a href="http://www.multipass.net/">Multipass</a>
</div>
Notez bien la façon dont change le style du pointeur de la souris avec la commande cursor:.
2 commentaires
Bonjour, J’utilise IE6 SP2, et le curseur ne change pas lorsque je passe sur les 2 derniers boutons. C’est le curseur "hand" qui s’affiche. Aurais je pbs avec mon IE6 ? Le connaissez vous ? Merci d’avance
Pour faire changer le curseur sur IE comme sur Mozilla/Firefox, indiquer la double syntaxe : cursor : pointer ; cursor : hand ;