Voilà le code en CSS du bouton numéro 1 : ========================================= .boutonCSS1 { font-size:18px; text-align:center; color:#00FFFF; background-color:#0066CC; padding:11px 10px 10px 11px; border:solid 2px #333333; border-top-color:#CCCCCC; border-left-color:#CCCCCC; } .boutonCSS1:hover { color:#FFFFFF; background-color: #003366; padding:10px 11px 11px 10px; border:solid 2px #333333; border-bottom-color:#CCCCCC; border-right-color:#CCCCCC; } Explications : ============== Le premier paquet de "règles" donne au bouton son aspect normal. Le second paquet donne les "règles" quand la souris passe au-dessus (hover). Dans le second paquet on ne donne que les règles qui s'écartent de la normale, donc on ne repète pas la taille des lettres et l'alignement du texte. On change donc la couleur du texte et celle du background. Padding est la distance entre le texte et le bord. Il y a 4 valeurs dans l'ordre: haut - droite - bas -gauche. ------------------------- ------------------------- | 11px | | 10px | | | | | | 11px 10px | | 10px 11px | | | | | | 10px | | 11px | ------------------------- ------------------------- normal hover Ainsi on a l'impression qu'on appuye sur le bouton: le texte bouge un peu à droite et en bas. En donnant d'autres couleurs au bords du bouton on donne l'impression qu'on l'enfonce.