Bouton HTML et CSS : Tutoriel rapide !
Manifique bouton en CSS et HTML

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

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 disponible ici

Traduit de l’anglais du blog : woork