Tutoriaux
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><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é.
Ajouter cette page à votre réseau social favoris
Rétrolien(0)
Adresse URI pour un rétrolien sur cet articleCommentaires (0)
Flux RSS pour les commentairesEcrivez un commentaire
Navigation
Publicités
Nos services
Programmation Web
Que ce soit pour faire la conception d'un site Web ou pour la refonte d'un site existant, nous avons la solution.
La création et la conception Web sont au cœur de nos activités. Chaque concept et création sont différents, et chaque client est unique. Rien n’est laissé au hasard pour faire de votre création multimédia un outil unique de promotion.
Suite ...
Programmation Desktop
Quel que soit votre projet, nous pouvons le réaliser pour vous !
Grâce à notre expertise en programmation, nous sommes en mesure de concevoir une variété d’applications qui pourront vous permettre d’augmenter votre clientèle, de la fidéliser ou encore de réduire vos coûts d’opération ! Nos critères élevés de contrôle de qualité ainsi que la grande expertise de nos programmeurs et de nos chargés de projets contribuent au succès des mandats qui nous sont confiés.
Suite ...
Autres ...
Quel que soit vos projets ou vos idées, contactez nous!
Grâce à notre expérience et notre expertise en informatique, nous serons en mesure d'évaluer vos projets et nous pourrons trouver une solution à vos problèmes. Que ce soit de la programmation ou de la base de données ou bien tout autres problèmes informatiques, contactez nous, nous serons là pour vous.
Suite ...