Créer de superbe bouton web 2.0 avec un peu de CSS et de XHTML

Le web 2.0 nous a apporté la clarté et la netteté du design et selon mon expérience dans le web 2.0, la simplicité est souvent la solution la plus simple afin d'obtenir un design attrayant. Ce tutoriel illustre comme créer des boutons stylisés à la mode web 2.0 avec très peu de code (X)HTML et CSS. Le résultat ressemble à ceci :

Étape 1 : (X)HTML

Afin de créer un bouton, nous allons utiliser la structure suivante : <a></a>. Soit un span imbriqué dans un lien <a>.

<a href="#" class="button">
Ajouter aux favoris
</a>

Afin de changer le visuel du bouton, il suffira par la suite de modifier la classe associée au , ce qui donnera ceci :

<a href="#" class="button">
Supprimer le favoris
</a>

<a href="#" class="button">
Ajouter à vos amis
</a>

Étape 2: CSS

Voici enfin le code css qui représente le bouton conteneur. Soit à quoi ressemble le bouton (police, couleur ...):

a.button{
background:url(img/button.gif);
display:block;
color:#555555;
font-weight:bold;
height:30px;
line-height:29px;
margin-bottom:14px;
text-decoration:none;
width:191px;
}
a:hover.button{
color:#0066CC;
}

... et voici maintenant les classes pour chaque différent visuel de bouton :

.add{
background:url(img/add.gif) no-repeat 10px 8px;
text-indent:30px;
display:block;
}
.delete{
background:url(img/delete.gif) no-repeat 10px 8px;
text-indent:30px;
display:block;
}
.user{
background:url(img/user.gif) no-repeat 10px 8px;
text-indent:30px;
display:block;
}

Il suffira par la suite d'ajouter les classes supplémentaires si vous désirez plus de boutons différents. Trouvez vos icônes favorites et ajoutez-les à vos boutons et le tour est joué.

Ajouter cette page à votre Digg-Like préféré