Magazine Emarketing

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.

Tutorial CSS, création d’un bouton design
Tutorial CSS, création d’un bouton design
Tutorial CSS, création d’un bouton design
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 :


Vous pourriez être intéressé par :

Retour à La Une de Logo Paperblog

Ces articles peuvent vous intéresser :

A propos de l’auteur


Mehdi 65 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte