CSS3 : bouton 3D en CSS

Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Paul Underwood, Create a CSS 3D push button.

Dans ce tutoriel nous allons voir comment utiliser les transitions CSS3 pour donner un effet 3D à un bouton lorsque l'on clique dessus. Pour ce faire nous allons utiliser la propriété box-shadow qui aura tout d'abord une valeur élevée ; puis à la suite d'un clic sur le bouton par un visiteur nous changerons la valeur pour une plus faible ce qui donnera l'impression que le bouton a été pressé vers le bas.

Pour finaliser l'effet 3D, nous allons utiliser le sélecteur CSS active qui devient actif lorsque le visiteur clique sur l'élément attaché à ce sélecteur.

Le code HTML pour le bouton est très simple car tout le travail sera fait en CSS. Tout ce que nous avons à faire est de créer un lien et de lui appliquer une class CSS, push_button.

<a href="#" class="push_button">
        Push Me
</a>

Pour créer l'effet 3D en CSS nous devons tout d'abord donner à notre lien l'apparence d'un bouton. Nous pourrons ensuite créer l'événement active pour notre bouton.

Copiez le code CSS suivant pour donner à votre lien l'apparence d'un bouton :

/****************************************************
 *      Bouton poussoir
 *****************************************************/
.push_button{
        position:relative;
        width:200px;
        color:#FFF;
        display:block;
        text-decoration:none;
        margin:0 auto;
        border-radius:5px;
        border:solid 1px #D94E3B;
        background:#cb3b27;
        text-align:center;
        padding:20px 30px;
        -webkit-transition: all 0.1s;
        -moz-transition: all 0.1s;
        transition: all 0.1s;
        -webkit-box-shadow: 0px 9px 0px #84261a;
        -moz-box-shadow: 0px 9px 0px #84261a;
        box-shadow: 0px 9px 0px #84261a;
}

Grâce à ce code CSS, votre bouton ressemblera à cela :

Pour créer l'effet « bouton poussoir » nous allons utiliser le sélecteur CSS active. Dans ce sélecteur nous devons réduire la taille de l'ombre du bouton obtenue grâce à la propriété box-shadow.

Copiez le code suivant pour créer l'effet active sur le bouton :

.push_button:active{
    -webkit-box-shadow: 0px 2px 0px #84261a;
    -moz-box-shadow: 0px 2px 0px #84261a;
    box-shadow: 0px 2px 0px #84261a;
    position:relative;
    top:7px;
}

La chose importante à remarquer à propos de ce code est que le bouton, ainsi que le sélecteur active, sont en position:relative; et que sur l'effet active, on déplace celui-ci de sept pixels vers le bas.

En changeant la position du bouton pour le descendre de sept pixels, cela donne l'impression que le bouton est enfoncé et pas uniquement que son ombre est réduite.

Nous avons vu dans ce tutoriel comment créer un bouton avec effet 3D lorsque l'on appuie sur celui-ci. Vous pouvez maintenant vous amuser avec la propriété box-shadow pour trouver d'autres applications !

Vous pouvez consulter la démonstration pour avoir un aperçu du rendu dans un navigateur.

Je tiens à remercier Paul Underwood pour m'avoir autorisé à traduire son tutoriel.
Je remercie également f-leb pour sa relecture orthographique.