MEDBLOG : Actualités Geek Web 2.0 & Webdesign

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 :