Exercices Création d’un bouton

Exercice - Création d’un bouton#

Ajoutez un bouton HTML

<button>I’m a button!</button>

Avec un peu de CSS (pensez à ajouter la classe en HTML)

.myButton {
    padding: 5px 10px;
    color: #eee;
    border-radius: 4px;
    background-color: #6820D9;
    background-image: linear-gradient(#AE3AEB, #8429E1 50%, transparent 50%);
    box-shadow: 0 1px 0 rgba(255,255,255,.1),
                0 0 1px 1px rgba(255,255,255,.3) inset,
                0 1px rgba(255,255,255,.4) inset;
    border: 1px solid black;
    text-shadow: 0 1px 1px rgba(0,0,0,.8);
    outline:none;
}

Voilà le rendu

Ajout de l’état survol et actif

.myButton:hover,
.myButton:focus {
    color: white;
    background-color: #9b30ff;
    box-shadow: 0 1px 0 rgba(255,255,255,.1),
                0 0 1px 1px rgba(255,255,255,.3) inset,
                0 1px rgba(255,255,255,.4) inset,
                0 0 5px rgba(174,58,235,1);
    border-color: rgba(255, 255, 255, .2);
}

.myButton:active {
    background-color: #7424bf;
    box-shadow: 0 1px 2px rgba(0,0,0,.6) inset,
                0 1px 0 rgba(255,255,255,.3);
    border: 1px solid black;
}

Ajout d’images: utilisations de sprite

La technique des sprites est très employée pour gérer plusieurs images simultanément. C’est une pratique héritée des jeux vidéos.

Utilisons donc cette technique sur nos boutons avec l’image suivante!

Le code à ajouter pour les boutons avec image

.myButton {
    background-image: url(sprite-icones.png),
                      linear-gradient(#AE3AEB,#8429E1 50%,transparent 50%);
    background-repeat: no-repeat;
    background-position: 5px 0, center;
}
.myButton-jeux {
    background-position: 5px -28px, center;
}
.myButton-musique {
    background-position: 5px -56px, center;
}
.myButton-reglages {
    background-position: 5px -84px, center;
}

Bonus : un bouton HTML est souvent associé à une action en JavaScript. Pour autant, le look graphique peut très bien s’appliquer à un lien. Essayez de le faire ! Que faut-il modifier, changer ?

<a href="#" class="myButton">Un lien</a>