Cherche Tuto pour création bouton CSS2 dynamique

Bonjour,

J'ai un paquet de boutons à faire sur mon site et je souhaiterais les faire dynamiquement en css plutôt que de créer systématiquement l'image correspondante au bouton dans sa version rollover et non rollover.

Mes boutons ont juste un background différent suivant si on est en hover ou non.

J'ai vu pas mal de techniques sur le web mais je ne sais laquelle prendre. Est-ce que l'une d'entre elles fait l'unanimité des intégrateurs web ? Est-ce qu'elle est facilement utilisable derrière avec du Jquery pour trapper l'évènement click sur tout le bouton (et pas qu'une partie...).

Pour info, je souhaite avoir le maximum de compatibilité navigateur donc plutôt une solution CSS2.

Merci d'avance pour votre retour d'expérience sur le sujet.

Eric

Un exemple de code issu de mon template (voir un exemple ici) :

/*            boutons            */

.button,input[type=submit] {
    display: inline-block;
    margin-right: 10px;
    padding: 4px 20px;
    font-weight: normal;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    border: 1px solid #3D5F1A;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border-bottom-color: #A2A2A2;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    background-color: #ff6f7d;
    -moz-box-shadow:
              0 0 0 3px rgba(255, 255, 255, .1),
        inset 0 0 0 1px rgba(255, 255, 255, .3);
    -webkit-box-shadow:
              0 0 0 3px rgba(255, 255, 255, .1),
        inset 0 0 0 1px rgba(255, 255, 255, .3);
    box-shadow:
              0 0 0 3px rgba(255, 255, 255, .1),
        inset 0 0 0 1px rgba(255, 255, 255, .3);
    vertical-align: top;
    cursor: pointer;
}

.button:hover,.button:focus,
input[type=submit]:hover,input[type=submit]:focus {
    background-color: #b9515d;
    text-decoration: none;
}

.button:active,input[type=submit]:active {
    position: relative;
    top: 1px;
    left: 1px;
}

Merci Olivier mais je recherchais plutôt (c'est de ma faute, je n'ai pas précisé) la version avec une image en background. Le but étant d'avoir une image découpée permettant d'avoir une largeur variable du bouton en fonction du texte.

Oui je vois, il s'agit de la technique css des portes coulissantes. Ne pas oublier cependant que cette technique est inutile pour 99% des boutons : étant donné que les arrondis, les effets d'ombre et les dégradés peuvent se faire full css...