Tutorial CSS, création d’un bouton design
Publié le 26 août 2007 par Mehdi
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 :