Tutoriaux
Administrateur
Jui 18
|18:51
Mise à jour le Mercredi, 18 Juin 2008 18:59
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><span></span></a>. Soit un span imbriqué dans un lien <a>.
<a href="#" class="button">
<span class="add">Ajouter aux favoris</span>
</a>
<span class="add">Ajouter aux favoris</span>
</a>
Afin de changer le visuel du bouton, il suffira par la suite de modifier la classe associée au <span class="...>, ce qui donnera ceci :
<a href="#" class="button">
<span class="delete">Supprimer le favoris</span>
</a>
<a href="#" class="button">
<span class="user">Ajouter à vos amis</span>
</a>
<span class="delete">Supprimer le favoris</span>
</a>
<a href="#" class="button">
<span class="user">Ajouter à vos amis</span>
</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;
}
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;
}
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é.
Envoyer par mail
Vu: 3820
Commentaires (0)
Flux RSS pour les commentairesEcrivez un commentaire
Navigation
Réseaux sociaux
Connexion
Publicités
MeilleursPrix.ca
|
|
