[quote="Photographiquement Vôtre"]Si j'ai bien compris, il faut faire un bouton par exemple dans photoshop.

Faut il faire des boutons différents pour chaque couleur ou on peut changer la "background color"[/quote]
Effectivement, il faut ouvrir son Photoshop (ou Fireworks ou Gimp, c'est selon). ;)

Pour la couleur des boutons, tu la gères avec ton logiciel de retouche graphique.

Une technique, celle des « portes coulissantes », permet de regrouper toutes ces images en une seule et de jongler avec la propriété CSS background-position. Cela permet de ne charger qu'une seule image au chargement de la page.

Considérons que l'image finale ressemble au schéma suivant :
[code]Image 1 de 200 sur 100 px
-------------------------
Image 2 de 200 sur 100 px[/code]
Les différentes images sont placées les unes en-dessous des autres.

On modifie le HTML et la CSS :

HTML (on ajoute des attributs id)
[code]<ul>
<li id="bouton-1"><a href="lien.html">Un bouton</a></li>
<li id="bouton-2"><a href="lien.html">Un autre bouton</a></li>
</ul>[/code]
CSS
[code]ul {
list-style: none;
}
li {
background: url(ton-image.png) no-repeat;
width: 200px;
height: 100px;
display: inline-block;
text-align: center;
line-height: 100px;
}
/* On fait coulisser l'image pour le bouton 2 */
#bouton-2
{
background-position: 0 -100px; /* On décale l'image de 100 pixels vers le haut */
}[/code]

Merci

Si j'ai bien compris, il faut faire un bouton par exemple dans photoshop.

Faut il faire des boutons différents pour chaque couleur ou on peut changer la "background color"

La solution la plus simple consiste à créer l'image de ton bouton, qui sera gerée en CSS.

Code HTML :
[code]<ul>
<li><a href="lien.html">Un bouton</a></li>
<li><a href="lien.html">Un autre bouton</a></li>
</ul>[/code]
CSS
[code]ul {
list-style: none;
}
li {
background: url(ton-image.png) no-repeat;
width: 200px; /* Largeur de l'image */
height: 100px; /* Hauteur de l'image */
display: inline-block; /* Alignement des éléments li, tout en gardant les possibilités d'un élément de bloc (dont les dimensions) */
text-align: center; /* Centrage horizontal du texte */
line-height: 100px; /* Centrage vertical (même valeur que la hauteur du bloc) */
}[/code]

Bonjour,

Je souhaite créer des boutons cliquables à bords arrondis avec du texte centré horizontalement et verticalement et de couleurs différentes.
Quelle est la meilleure façon d'y arriver.

Merci