[CSS] Créer un bouton à la Facebook

[Dakin Quelia]

» Créer un bouton à la Facebook

Dans cette documentation, je vais vous expliquer comment créer un simple bouton à la Facebook avec la feuille de style (CSS).

Tout d'abord, on va commencer par donner un nom à notre futur bouton : « customButton ». Ce nom changera quelque peu selon les différentes classes que nous utiliserons dans notre page HTML.

» Version simple

Ici, je vais expliquer comment créer un bouton tout simple sans autre décoration (icône, etc).

Au niveau CSS, il suffit simplement d'ajouter ce code :

Code : Tout sélectionner

/* Custom Button (Facebook Style)
------------------------------------------- */
.customButton {
    background: transparent linear-gradient(#4C69BA, #3B55A0) repeat scroll 0% 0%;
    border: medium none;
    border-radius: 2px;
    height: 20px;
    padding: 0px 0px 0px 5px;
    white-space: nowrap;
    cursor: pointer;
    color: #FFF;
	font-family: helvetica,arial,sans-serif;
	font-size: 11px;
    font-weight: bold;
    line-height: 20px;
    text-shadow: 0px -1px 0px #354C8C;
}

.customButton:hover {
    border-color: #385490 #DDD #374F92;
    box-shadow: 0px 0px 1px #3E58A3 inset;
    background: transparent linear-gradient(#415CA9, #4C69BA) repeat scroll 0% 0%;
    opacity: 0.9;
}

.customButtonContainer {
	cursor: pointer;
}

.customButtonX {
    cursor: default;
}

.customButtonInline {
    display: inline-block;
}

.customButton a {
	color: #FFF;
	text-decoration: none;
}

.customButton .customButtonLabel {
    padding: 0px 5px 0px 0px;
    position: relative;
    vertical-align: top;
}

Au niveau HTML, il suffit simplement d'ajouter ce code :

Code : Tout sélectionner

<div class="customButton customButtonInline">
	<div>
		<div class="customButtonContainer">
			<span class="customButtonLabel"><a href="http://www.test.com/">J’aime l'article</a></span>
		</div>
	</div>
</div>

Exemple avec un lien.

» Version avancée

Dans cette partie, je vais expliquer comment ajouter une icône à votre bouton par exemple.

Au niveau CSS, il suffit simplement d'ajouter ce code :

Code : Tout sélectionner

/* Custom Button (Facebook Style)
------------------------------------------- */
.customButton {
    background: transparent linear-gradient(#4C69BA, #3B55A0) repeat scroll 0% 0%;
    border: medium none;
    border-radius: 2px;
    height: 20px;
    padding: 0px 0px 0px 5px;
    white-space: nowrap;
    cursor: pointer;
    color: #FFF;
	font-family: helvetica,arial,sans-serif;
	font-size: 11px;
    font-weight: bold;
    line-height: 20px;
    text-shadow: 0px -1px 0px #354C8C;
}

.customButton:hover {
    border-color: #385490 #DDD #374F92;
    box-shadow: 0px 0px 1px #3E58A3 inset;
    background: transparent linear-gradient(#415CA9, #4C69BA) repeat scroll 0% 0%;
    opacity: 0.9;
}

.customButtonContainer {
	cursor: pointer;
}

.customButtonX {
    cursor: default;
}

.customButtonImage {
    display: inline-block;
}

.customButton button {
    background: transparent none repeat scroll 0% 0%;
    border: 0px none;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
    font-style: inherit;
    font-size: inherit;
    line-height: inherit;
    font-size-adjust: inherit;
    font-stretch: inherit;
    font-variant: inherit;
    font-weight: bold;
    margin: 0px;
    outline: medium none;
    padding: 0px;
    text-shadow: 0px -1px 0px #354C8C;
}

.customButtonIcon {
    height: 14px;
    left: 0px;
    margin: 0px 4px;
    position: relative;
    top: 3px;
    vertical-align: top;
    width: 14px;
}

.customButtonInline {
    display: inline-block;
}

.customButton .customButtonLabel {
    padding: 0px 5px 0px 0px;
    position: relative;
    vertical-align: top;
}

Au niveau HTML, il suffit simplement d'ajouter ce code :

Code : Tout sélectionner

<div class="customButton customButtonInline">
	<div>
		<div class="customButtonContainer">
			<span class="customButtonIcon"><img src="./images/tick.png" /></span>
			<span class="customButtonLabel"><a href="http://www.test.com/">J’aime l'article</a></span>
		</div>
	</div>
</div>

» Résultat

Voici ce que cela peut donner comme résultat :

» Mot de la fin

Cette documentation est, évidemment, perfectible. Vous pourriez ajouter différentes teintes à votre bouton, par exemple.