Donner du style et du relief à vos boutons

Dans ce post, nous allons utiliser quelques particularités très puissantes du CSS3  afin de créer de beaux boutons CSS3. Nous allons nous concentrer sur la création d’un seul bouton pour ce tutoriel.

On commence par du HTML de base

Nous commencerons par créer un simple lien auquel nous affecterons une classe « bouton ».

<a href="#" class="bouton">Bouton</a>

On procède à la construction du bouton css3

Nous allons mettre en forme le bouton en ajoutant quelques attributs basiques css.

.bouton {
    width:auto;
    padding:8px 0;
    text-align:center;
    display: inline-block;
    float:left;
    margin:0 8px 0 0;
    border-radius:7px;
    font-size: 0.85em;
    width:120px;
    color:#000;
    font-family: Arial,sans-serif;
}

On enjolive le bouton avec du css3

Nous commençons par appliquer un beau dégradé partant d’une couleur claire à une couleur plus sombre que nous affectons à l’état du bouton initial mais également à l’état actif.

.bouton, .bouton:active {
    background: #444;
    background: linear-gradient( #555, #2C2C2C);
    background: -webkit-linear-gradient( #555, #2C2C2C);
    background: -moz-linear-gradient( #555, #2C2C2C);
    background: -ms-linear-gradient( #555, #2C2C2C);
    background: -o-linear-gradient( #555, #2C2C2C);
    background: linear-gradient( #555, #2C2C2C);
}

Ne soyez pas effrayé, le nombre de déclarations différentes du linear-gradient est nécessaire pour que cela soit lisible par tous les navigateurs.

On ajoute une ombre et un texte en relief

Le css3 est très puissant, plus besoins d’image ou de javascript pour obtenir des effets graphiques tel que les ombres on les dégradés.

.bouton {
box-shadow: 0 0 1px rgba( 0, 0, 0, 0.2), 0 -1px 0 rgba( 255, 255, 255, 0.1);
text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.3);
}

Le comportement :hover du bouton en css3

.bouton:hover {
    background: #555;
    background: -webkit-linear-gradient( #777, #333);
    background: -moz-linear-gradient( #777, #333);
    background: -ms-linear-gradient( #777, #333);
    background: -o-linear-gradient( #777, #333);
    background: linear-gradient( #777, #333);
}

Et enfin, le comportement :active

Il suffit d’ajouter une ombre intérieure (attribut inset)

.bouton:active{
   box-shadow: 1px 1px 10px #000 inset, 0 1px 0 rgba( 255,   255, 255, 0.4);
}

Vous obtiendrez de superbes boutons en CSS3 pour rendre votre site toujours plus attractifs.