CSS3 : boutons brillants

Créer des boutons brillants grâce aux feuilles de style CSS

Ce tutoriel va vous apprendre à créer des boutons brillants en CSS3 qui seront attractifs pour vos utilisateurs.

1 commentaire

Article lu fois.

Les deux auteur et traducteur

Paul Underwood

Traducteur : Sébastien Germez

L'article

Publié le 2 août 2012

Public visé : tout le monde

Version PDF Version hors-ligne

ePub, Azw et Mobi

Liens sociaux

I. Traduction▲

Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Paul Underwood, How to create shiny css buttons.

II. Introduction▲

Dans ce tutoriel nous allons voir comment utiliser le CSS3 pour donner un effet de brillance à des boutons. Pour ce faire nous allons utiliser les propriétés box-shadow, border-radius et animation.

L'effet de brillance s'activera lorsque l'utilisateur survolera le bouton avec le pointeur de sa souris.

Cette technique ne fonctionne malheureusement pas sur tous les navigateurs, les plus anciens ne supportant pas toutes les nouvelles propriétés introduites en CSS3.

III. Le HTML▲

Pour commencer nous allons ajouter le code HTML suivant à notre page :

Sélectionnez

<a href="#" class="button green">
<div class="light"></div>
Click Here</a>
<a href="#" class="button red">
<div class="light"></div>
Click Here</a>
<a href="#" class="button blue">
<div class="light"></div>
Click Here</a>
<a href="#" class="button yellow">
<div class="light"></div>
Click Here</a>
<a href="#" class="button grey">
<div class="light"></div>
Click Here</a>
<a href="#" class="button black">
<div class="light"></div>
Click Here</a>
<a href="#" class="button brown">
<div class="light"></div>
Click Here</a>
<a href="#" class="button darkred">
<div class="light"></div>
Click Here</a>
<a href="#" class="button purple">
<div class="light"></div>
Click Here</a>

Ce qu'il est important de noter ici est la classe CSS utilisée pour les liens. Ils ont tous en commun la classe button de sorte à ce qu'ils se comportent tous de la même manière. Cependant pour leur donner une apparence différente, on ajoute une deuxième classe qui permettra de changer leur couleur.

De plus chaque bouton contient une balise <div> avec une classe CSS light. C'est cette classe qui donnera l'effet de brillance aux boutons, nous y reviendrons plus loin dans le tutoriel.

IV. Le CSS▲

Le code CSS est la partie principale de ce tutoriel et il y a beaucoup à faire. C'est pourquoi nous allons découper cette partie en trois sous-parties : l'apparence, l'effet d'ombre sur les propriétés hover et active et l'animation qui donnera l'effet de brillance.

Tout d'abord nous allons nous occuper de l'apparence des boutons. Chaque bouton utilise donc la classe CSS button qui fixera leur taille et une classe différente pour la couleur de fond.

IV-A. L'apparence des boutons▲

IV-A-1. La classe « button »▲

Sélectionnez

.button{
        height:2em;
        padding:15px 50px;
        margin:20px 40px;
        cursor:pointer;
        display:inline-block;
        color:#FFF;
        font-size:1em;
        border:1px solid #eee;
        background:#eee;
        border-radius:4px;
        line-height:2em;
        border:1px solid #aaa;
        text-decoration:none;
        -webkit-transition: all 0.3s linear;
     -khtml-transition: all 0.3s linear;
       -moz-transition: all 0.3s linear;
         -o-transition: all 0.3s linear;
            transition: all 0.3s linear;

Comme vous pouvez le voir le code est basique pour fixer la taille et la marge interne aux boutons. Grâce à cette classe, on ajoute également la propriété transition qui permet de faire apparaître l'effet d'ombre en fondu sur l'événement hover.

IV-A-2. Couleur des boutons▲

Le code CSS suivant est utilisé pour donner une couleur différente à chaque bouton.

Sélectionnez

/***********************************************************************
 *      Fond vert
 **********************************************************************/
.green{
        background: #cdeb8e; /* Old browsers */
        background: -moz-linear-gradient(top, #cdeb8e 0%, #a5c956 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdeb8e), color-stop(100%,#a5c956)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #cdeb8e 0%,#a5c956 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #cdeb8e 0%,#a5c956 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #cdeb8e 0%,#a5c956 100%); /* IE10+ */
        background: linear-gradient(top, #cdeb8e 0%,#a5c956 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdeb8e', endColorstr='#a5c956',GradientType=0 ); /* IE6-9 */
}
/***********************************************************************
 *      Fond rouge
 **********************************************************************/
.red{
        background: #ff3019; /* Old browsers */
        background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* IE10+ */
        background: linear-gradient(top, #ff3019 0%,#cf0404 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */
}
/***********************************************************************
 *      Fond jaune
 **********************************************************************/
.yellow{
        background: #ffd65e; /* Old browsers */
        background: -moz-linear-gradient(top, #ffd65e 0%, #febf04 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd65e), color-stop(100%,#febf04)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #ffd65e 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #ffd65e 0%,#febf04 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #ffd65e 0%,#febf04 100%); /* IE10+ */
        background: linear-gradient(top, #ffd65e 0%,#febf04 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 ); /* IE6-9 */
}
/***********************************************************************
 *      Fond gris
 **********************************************************************/
.grey{
        background: rgb(238,238,238); /* Old browsers */
        background: -moz-linear-gradient(left, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(left, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(left, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(left, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */
        background: linear-gradient(left, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=1 ); /* IE6-9 */
}
/***********************************************************************
 *      Fond noir
 **********************************************************************/
.black{
        background: #7d7e7d; /* Old browsers */
        background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
        background: linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
}
/***********************************************************************
 *      Fond marron
 **********************************************************************/
.brown{
        background: #f6e6b4; /* Old browsers */
        background: -moz-linear-gradient(top, #f6e6b4 0%, #ed9017 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6e6b4), color-stop(100%,#ed9017)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* IE10+ */
        background: linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 ); /* IE6-9 */
}
/***********************************************************************
 *      Fond bleu
 **********************************************************************/
.blue{
        background: #7abcff; /* Old browsers */
        background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */
        background: linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
}
/***********************************************************************
 *      Fond rouge foncé
 **********************************************************************/
.darkred{
        background: rgb(169,3,41); /* Old browsers */
        background: -moz-linear-gradient(left, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(left, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(left, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(left, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* IE10+ */
        background: linear-gradient(left, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=1 ); /* IE6-9 */
}
/***********************************************************************
 *      Fond violet
 **********************************************************************/
.purple{
        background: rgb(203,96,179); /* Old browsers */
        background: -moz-linear-gradient(left, rgba(203,96,179,1) 0%, rgba(173,18,131,1) 50%, rgba(222,71,172,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(203,96,179,1)), color-stop(50%,rgba(173,18,131,1)), color-stop(100%,rgba(222,71,172,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(left, rgba(203,96,179,1) 0%,rgba(173,18,131,1) 50%,rgba(222,71,172,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(left, rgba(203,96,179,1) 0%,rgba(173,18,131,1) 50%,rgba(222,71,172,1) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(left, rgba(203,96,179,1) 0%,rgba(173,18,131,1) 50%,rgba(222,71,172,1) 100%); /* IE10+ */
        background: linear-gradient(left, rgba(203,96,179,1) 0%,rgba(173,18,131,1) 50%,rgba(222,71,172,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#de47ac',GradientType=1 ); /* IE6-9 */
}

IV-B. Les événements▲

IV-B-1. L'événement « hover »▲

Sur l'événement hover des boutons nous allons ajouter un effet d'ombre grâce à la propriété box-shadow qui donnera l'impression à l'utilisateur que le bouton ressort. Pour ajouter cet effet d'ombre, copiez le code CSS suivant :

Sélectionnez

.button:hover{
        -webkit-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
     -khtml-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
       -moz-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
         -o-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
            box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
}

IV-B-2. L'événement « active »▲

L'événement active d'un bouton se déclenche lorsqu'un utilisateur clique sur ce dernier. Nous allons modifier l'effet d'ombre sur cet événement afin de savoir quand un utilisateur a cliqué sur le bouton.

Ajoutez le code CSS suivant à votre feuille de style :

Sélectionnez

.button:active {
    -webkit-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
     -khtml-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
       -moz-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
         -o-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
            box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
    text-shadow:1px 1px 1px #eee;
}

IV-C. L'effet de brillance▲

Cette partie du tutoriel traite de l'effet de brillance des boutons. Cet effet apparaît sur un bouton sous la forme d'un trait lumineux tournoyant de gauche à droite.

Pour créer cet effet nous allons utiliser la propriété CSS animation pour ajouter un événement qui va modifier la balise div avec plusieurs images.

Pour commencer nous devons donner à notre div l'apparence d'un rayon de lumière. Pour cela nous allons utiliser un arrière-plan qui sera brillant au centre avec un dégradé vers les extrémités.

Sélectionnez

.light {
    display: block;
    position: relative;
    background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.9)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* IE10+ */
        background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
    padding: 1px 9px;
    top: -16px;
    left: -53px;
    height: 0px;
}

Ce code va placer un trait lumineux au-dessus du bouton, nous pouvons donc maintenant ajouter l'animation sur la div grâce à l'événement hover du bouton.

Sélectionnez

.button:hover .light{
        padding:1px 5px;
    -webkit-animation-name: shine;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-timing-function: linear;
    -khtml-animation-name: shine;
    -khtml-animation-duration: 0.6s;
    -khtml-animation-timing-function: linear;
    -moz-animation-name: shine;
    -moz-animation-duration: 0.6s;
    -moz-animation-timing-function: linear;
    -o-animation-name: shine;
    -o-animation-duration: 0.6s;
    -o-animation-timing-function: linear;
    -webkit-animation-name: shine;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-timing-function: linear;
    left:45px;
}
@-webkit-keyframes shine {
    0% { top: -15px; left: -48px; }
    10% { top: -5px; }
    20% { top: 5px; }
    30% { top: 15px; }
    40% { top: 25px; }
    50% { top: 35px; }
    60% { top: 25px; }
    70% { top: 15px; }
    80% { top: 5px; }
    90% { top: -5px; }
    100% { top:-15px; left:45px; -webkit-transform: rotate(-360deg); }
}
@-khtml-keyframes shine {
    0% { top: -15px; left: -48px; }
    10% { top: -5px; }
    20% { top: 5px; }
    30% { top: 15px; }
    40% { top: 25px; }
    50% { top: 35px; }
    60% { top: 25px; }
    70% { top: 15px; }
    80% { top: 5px; }
    90% { top: -5px; }
    100% { top:-15px; left:45px; -khtml-transform: rotate(-360deg); }
}
@-moz-keyframes shine {
    0% { top: -15px; left: -48px; }
    10% { top: -5px; }
    20% { top: 5px; }
    30% { top: 15px; }
    40% { top: 25px; }
    50% { top: 35px; }
    60% { top: 25px; }
    70% { top: 15px; }
    80% { top: 5px; }
    90% { top: -5px; }
    100% { top:-15px; left:45px; -moz-transform: rotate(-360deg); }
}
@-o-keyframes shine {
    0% { top: -15px; left: -48px; }
    10% { top: -5px; }
    20% { top: 5px; }
    30% { top: 15px; }
    40% { top: 25px; }
    50% { top: 35px; }
    60% { top: 25px; }
    70% { top: 15px; }
    80% { top: 5px; }
    90% { top: -5px; }
    100% { top:-15px; left:45px; -o-transform: rotate(-360deg); }
}
@-keyframes shine {
    0% { top: -15px; left: -48px; }
    10% { top: -5px; }
    20% { top: 5px; }
    30% { top: 15px; }
    40% { top: 25px; }
    50% { top: 35px; }
    60% { top: 25px; }
    70% { top: 15px; }
    80% { top: 5px; }
    90% { top: -5px; }
    100% { top:-15px; left:45px; transform: rotate(-360deg); }
}

C'est tout ce dont nous avons besoin pour créer cet effet.

V. Conclusion▲

Nous avons vu dans ce tutoriel comment rendre plus attractifs les boutons de votre site en ajoutant un effet de brillance. Vous pouvez vous amuser avec les propriétés box-shadow et animation pour créer d'autres effets !

VI. Liens▲

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

VII. Remerciements▲

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

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants :

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © Paul Underwood. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.