Forum d'entraide PHPFrance

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

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

Code HTML :

Code : Tout sélectionner

<ul>
  <li><a href="lien.html">Un bouton</a></li>
  <li><a href="lien.html">Un autre bouton</a></li>
</ul>

CSS

Code : Tout sélectionner

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) */
}

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"

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"

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 : Tout sélectionner

Image 1 de 200 sur 100 px
-------------------------
Image 2 de 200 sur 100 px

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 : Tout sélectionner

<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>

CSS

Code : Tout sélectionner

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 */
}

Forum d'entraide PHPFrance

Réalisation de bouton cliquable

Réalisation de bouton cliquable