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 :