CSS Manifique bouton en CSS Tutoriels, Cours CSS

| Vous êtes sur la page : bouton_en_css

Tutoriel 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 grafistes afin de donner une personnaliser le site et le rendre moins commun
bouton en CSS

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

CSS Débutant .com

Manifique bouton en CSS

Tutoriel css

Compatibilité :

Manifique bouton en CSS

Débuter en CSS :

Comprendre et coder en CSS

Tutoriels