Un beau bouton submit avec CSS
Posté par jbj le 16 nov 2007 dans (x)HTML/CSS • 12 commentairesStyler un bouton submit n'est pas toujours évident: Comme souvent avec les styles CSS, si l'on souhaite assurer une compatibilité cross-browser avec IE6, il faut prendre son mal en patience.
J'ai eu l'occasion d'étudier diverses techniques à ce sujet, voici celle qui me semble la meilleure.
Pour commencer, une bonne base
Déja, la première chose à savoir est qu'Internet Explorer 6 ne gere pas ce type de codage css, pourtant bien pratique:
input[type="submit"]{...}
Pour contrer ce problème, il suffit d'ajouter une classe à chaque submit que l'on voudra styler. Ce qui nous donne, en html:
<input type="submit" value="ok" id="valider" class="submit" />
Le principe de la classe CSS submit est simple: Nous allons enlever les bordures définies par défauts par les browsers sur les boutons submit et affecter une image de fond de notre choix. Il ne faudra pas non plus oublier de préciser la longueur et largeur de l'image afin qu'elle ne soit pas tronquée:
.submit{
border:none;
color:#fff;
background: transparent url('images/monimage.png') no-repeat top left;
width:75px;
height:20px;
}
Pour aller plus loin
Il erait fort tentant de vouloir ajouter un effet de type rollover au survol du bouton, malheureusement, encore une fois le navigateur de Micro$oft va mettre des barrières à notre créativité: Il ne gère pas la pseudo classe :hover sur un autre élément qu'un lien.
Il existe toutefois plusieurs solutions plus ou moins propres qui tentent de pallier à ce problème. La moins cracra à mon gout consiste à entourer le bouton d'un lien hypertexte comme dans l'exemple proposé ci-dessous:
<a href="javascript:void(0)"> <input type="submit" id="valider" class="submit" value="ok" /> </a>
Dans la feuille de style, il faudra mettre:
a:hover input.submit {
cursor:pointer;
background-image: url('images/secondeimage.png');
}
Ce même effet peut facilement être implémenté avec un peu de javascript. Ici nous appellons la fonction rollover au survol du bouton.
<input type="submit" id="valider" class="submit" value="ok" onmouseover="rollover();"/>
La fonction Javascript rollover se chargera de modifier l'image de fond:
function rollover(){
document.getElementById('valider').style.backgroundImage = 'url(images/secondeimage.png)';
}
Bien entendu, il ne faudra pas oublier de replacer la première image lorsque le curseur ne survolera plus le bouton!
Une autre solution, expliquée ici, indique comment faire comprendre la pseudo-classe :hover à IE6. Toutefois, il faut noter que cette méthode n'est pas valide CSS. Comme (trop) souvent, avec IE, les développeurs se voient obligés de choisir entre fonctionnalité et respect des standards...
papachu le 
aguillem le 
hubombing le 
