Bouton HTML et CSS : Tutoriel rapide !
Manifique bouton en CSS et HTML
Tutoriel pour créer un bouton en CSS
Compatibilité :
En CSS, certains scripts ne sont pas compatibles avec tous les navigateurs. Voici la liste des navigateurs compatibles :
Manifique bouton en CSS
Les boutons par défaut en HTML sont souvent modifiés par les graphistes afin de donner une personnaliser le site et le rendre moins commun
Etape 1 : le code HTML
Il faut utiliser les tag <a> avec la balise span à l'intérieur.
<a href="#" class="button"><span class="add">Add to your bookmark</span></a>Vous pouvez repliquer cette structure pour tout les boutons nécessaires sur votre site :
Et la balise <a> est le contenaire du bouton
et une "classe" au sens CSS avec une balise span qui contient les propirétés de couleur de fond et l'icone à appliquer au bouton.
Exemple :
<a href="#" class="button"><span class="delete">Delete this bookmark</span></a> <a href="#" class="button"><span class="user">Add to friends</span></a>
Etape 2 : Le code CSS
Voici le code CSS qui définie la couleur de fond, taille, hauteur....
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 pour fini on ajoute la notion de class pour l'aspect final des boutons css
/* -------------------- */
/* CLASSES */
/* -------------------- */
.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;
}
Un exemple est disponibile ici
Traduit de l'anglais du blog : woork
Voulez-vous laisser une note ou un commentaire ?
Donnez votre avis sur ce contenu :
Votes:
4.1 (99%)
55 votes