Tutorial CSS, création d’un bouton design
Ce tutorial va vous permettre de créer des boutons personnalisés pour vos formulaire ou autre.
Première étape :
Créer les différentes images composant le bouton.
![]() |
![]() |
![]() |
bg_button_span.gif | bg_button_p.gif | bg_button_a.gif |
Seconde étape :
Une fois votre bouton créer et découper il ne vous reste plus qu’à insérer le code CSS suivant dans votre page.
<style type="text/css"> <!-- .clear { overflow: hidden; width: 100%; } a.button { background: transparent url('bg_button_a.gif') no-repeat scroll top right; color: #FFF; display: block; float: left; font: normal 12px arial, sans-serif; font-weight:bold; height: 34px; margin-right: 6px; padding-right: 18px; text-decoration: none; } a.button p { background: transparent url('bg_button_span.gif') no-repeat; display: block; margin:0; padding:0; } a.button span { background: transparent url('bg_button_p.gif') repeat; display: block; line-height: 24px; margin: 0 0 0 18px; padding: 5px 0 5px 0px; } a.button:active { background-position: bottom right; color: #000; outline: none; } a.button:active p{ background-position: bottom left; padding:0; margin:0px; } a.button:active span { background-position: bottom; margin: 0 0 0 18px; padding: 5px 0 5px 0px; } --> </style>
Troisième étape :
Appeler ou insérer le bouton dans votre page HTML par le biais de de la ligne de code suivante :
<a class="button" href="#" onclick="this.blur();"><p><span>Je suis le plus beau bouton du monde</span></p></a>
Cette petite manipulation CSS, va vous permettre d’avoir des boutons plus stylés que les boutons part défaut, je tiens juste a vous informer que ce ne sont pas des boutons de type formulaire (input) mais plutôt une personnalisation de la balise lien (A).
Résultat du tutorial :
10 commentaires, commentaire ou Trackback
webister
merci pour le tuto
27 août 2007
MedBlog
De rien Webister, je suis en train de préparer d’autre pour des futurs billet.
27 août 2007
Kabr
ça avance dans le bon sens ton blog.
27 août 2007
hchicha
Yesss man! Il est beau le bouton ;)
Merci !
27 août 2007
never_again
<p>(block) tag can not be contained in a <a>(inline) tag
2 septembre 2007
Piwi
NEVER_AGAIN a écrit :
“(block) tag can not be contained in a (inline) tag”
A moins de définir a.button{ display: block } dans le CSS, tout comme une balise peut devenir un élément en ligne (display: inline).
11 septembre 2007
MedBlog
Display : block et Display : inline permettent donc de passer d’une structure à l’autre, en modifiant le comportement d’un élément. L’exemple le plus courant est de vouloir donner une dimension et une image de fond à une balise pour en faire un bouton. Par défaut, est une balise Inline, il faut donc la passer en Block pour lui donner des dimensions et la sortir du texte courant.
11 septembre 2007
monia
svp donnez moi ds exemplaires du bouton et des interfaces
26 février 2008
JP
super tuto, cela fonctienne tres bien,
cependant, j’ai un probleme d’affichage lorsque le texte du bouton est long et qu’il n’y a pas assez de place sur la ligne du navigateur.
le bouton est affiché en 2 parties.
Etant notive dans le css, quelqu’un aurait-il une idée ?
merci
ps le le reproduire, il faut de mettre plusieur boutons à la suite avec dedans des textes long.
8 août 2008
JM
Bonjour et bravo pour ce tuto…
J’ai juste un petit problème, je narrive pas à centrer ma “ligne” de boutons ; j’ai pourtant utiliser les balises “” puis “” mais ilsont à gauche toute…
peut-on m’aider s’il vous plait ? Merci par avance à ceux qui vont essayer
JM
9 décembre 2008