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

Créer le bouton avec HTML :

 

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

 

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');

 

3ème étape

Stylisons maintenant le bouton. 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;
    float: left;
    border-radius: 10px;
    font-family: 'Pacifico', cursive;
    font-size: 25px;
    color: #ffffff;
    text-decoration: none;
    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é !

Partagez cet article