Créer un bouton qui s'enfonce avec CSS

Les boutons sur un site sont les principaux déclencheurs d'action : les styliser et les dynamiser est très important dans vos processus de développement ! C'est l'objectif de cet article.

Vous pouvez retrouver l'ensemble de ce tutoriel sur notre compte Instagram

1ère étape

Dans une premier temps, nous avons besoin de préciser où placer notre bouton. Nous avons deux choix qui sont possibles :

1. Faire un bouton qui redirige un utilisateur (donc en utilisant un lien)
2. Faire un bouton qui effectue une action (donc avec du JavaScript par exemple)

Nous conviendrons dès lors qu'un bouton effectue soit une redirection, soit une action.

Selon le type d'effet que vous souhaitez faire avec votre bouton, il va vous falloir choisir entre trois possibilités :

1. Faire un lien et le styliser comme si c'était un bouton (avec la balise <a></a>) ;
2. Faire un bouton avec la balise <button></button> ;
3. Faire un bouton avec la balise <input type="button" /> (pour dans un formulaire).

Avant de commencer un bouton, il faut donc bien comprendre le contexte dans lequel vous allez vouloir l'utiliser. Nous n'utiliserons pas un bouton avec la balise <input type="button" /> si c'est pour faire un bouton qui redirige notre utilisateur par exemple. On privilégiera plutôt cette balise dans un formulaire.

Pour faire un bouton, la première chose que nous avons besoin de faire est de créer une classe. Il s'agit simplement d'un moyen pour nous de nous faciliter la vie en factorisant notre code. En effet, lorsque nous voudrons changer le style de notre bouton : un simple changement dans la classe suffira.

Commençons donc par créer un bouton qui redirige un utilisateur. Pour ce faire, voici comment créer un bouton avec HTML :

<a href="#" class="action-button">
    Clique moi
</a>

Notez qu'il est également possible d'utiliser la balise HTML dédiée aux boutons avec button :

<a href="#">
    <button class="action-button">
        Clique moi
    </button>
</a>

Les deux sont exactement identiques. La seule différence est qu'avec la balise button, nous allons récupérer un style qui sera généré par défaut par le navigateur :

2ème étape

Pour ce bouton, utilisons une police originale ! Je propose l'utilisation de la police Pacifico sur l'excellent service Google Fonts.

Si vous ne savez pas comment utiliser Google Fonts, vous pouvez apprendre à le maîtriser parfaitement grâce à cette vidéo spécialement dédiée, créée par notre équipe.

@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

Nous allons donc placer ce code @import dans notre feuille de style.

Pour rappel, @import permet d'intégrer dans une feuille de style le contenu d'une autre feuille de style

3ème étape

Maintenant que notre police personnalisée est mise en place, nous pouvons passer à la création de notre classe .action-button.

Pour commencer, créons notre sélecteur :

.action-button {

}

Commençons par ajouter une marge interne (le padding) ainsi que notre police personnalisée et des bordures arrondies :

.action-button {
    padding: 10px 40px;
    border-radius: 10px;
    font-family: 'Pacifico', cursive;
}

Ajoutons la propriété text-decoration: none pour ne pas voir de soulignement sur notre bouton (puisqu'il s'agit dans notre petit exemple d'un lien) :

.action-button {
    padding: 10px 40px;
    border-radius: 10px;
    font-family: 'Pacifico', cursive;
    /* On ajoute cette nouvelle propriété */
    text-decoration: none;
}

Enfin, stylisons notre bouton maintenant.  Tout le secret se trouve dans la bordure du bas du bouton, qui va nous permettre de jouer sur les effets.

.action-button {
    padding: 10px 40px;
    border-radius: 10px;
    font-family: 'Pacifico', cursive;
    text-decoration: none;
    /* Ici on modifie la couleur et le fond de notre petit bouton */
    background-color: #3498DB;
    border-bottom: 5px solid #2980B9;
    text-shadow: 0px -2px #2980B9;
    transition: all 0.1s;
    -webkit-transition: all 0.1s;
}

Nous allons aussi styliser notre bouton lorsque celui-ci est cliqué, grâce à l'événement CSS active :

.action-button:active {
    transform: translate(0px,5px);
    -webkit-transform: translate(0px,5px);
    border-bottom: 1px solid;
}

La propriété transform nous permet de transformer notre bouton, de le tourner, et tout un tas d'autres choses.

Ici, on lui dit de ne pas bouger sur l'axe des abscisses (horizontal) et de 5px vers le bas sur l'axe des ordonnées (vertical).

Et le tour est joué ! Si vous voulez allez encore plus loin, il est même possible de créer un bouton façon "néon" avec du CSS voir même également de jouer sur les dégradés pour faire des boutons arc-en-ciel !