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 communauté d'entraide francophone dédiée au PHP
Réalisation de bouton cliquable
Eléphant du PHP |
330 Messages
-------------------------------------------------------
Il n'y a que les cons et les moules qui adhèrent
Il n'y a que les cons et les moules qui adhèrent
Mammouth du PHP |
2937 Messages
La solution la plus simple consiste à créer l'image de ton bouton, qui sera gerée en CSS.
Code HTML :
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>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) */
}
Eléphant du PHP |
330 Messages
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"
-------------------------------------------------------
Il n'y a que les cons et les moules qui adhèrent
Il n'y a que les cons et les moules qui adhèrent
Mammouth du PHP |
2937 Messages
Effectivement, il faut ouvrir son Photoshop (ou Fireworks ou Gimp, c'est selon).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"
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 pxOn 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>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 */
}