En tant que développeur web, aussi étonnant que cela puisse paraitre, ça m’arrive de naviguer sur internet (je vous jure !). J’en vois défiler des sites internets, et dans le lot, certains retiennent plus mon attention que d’autres : ceux ayant des petites animations sur mes actions. Au clic, au survol, lors d’une pression sur une touche du clavier, la mise en place de telles animations peut se faire à peu près partout.

Mais pourquoi mon attention se dirige beaucoup plus vers ce genre de chose ? Est-ce parce que j’ai un attrait fort dans le développement Front-End et que, comme diraient certains développeurs Back-End, j’aime faire du coloriage avec CSS ? Possible, mais après pas mal de recherches sur le net, je ne suis visiblement pas le seul à être attiré par ces animations.

Ce comportement est en effet totalement normal. Vous ne vous êtes jamais demandé pourquoi les bannières de publicités étaient animées ? Ou même pourquoi on aime cliquer sur le bouton ‘like’ de Twitter ?

Ces animations ont un but précis : retenir notre attention, et c’est très efficace. Mais pas que ! Elles permettent également d’unifier les différents composants de notre application, rendre notre page beaucoup plus réactive uniquement manière visuelle, etc.

Pour revenir sur l’exemple du bouton ‘like’ de Twitter, c’est une sorte de récompense visuelle que l’on obtient après avoir cliqué sur ce dernier. Et ça notre cerveau en raffolle !

Si vous souhaitez obtenir plus d’informations sur ce sujet, je vous invite à lire le livre Designing Interface Animation: Improving the User Experience Through Animation écrit par Val Head.

Que diriez-vous de créer ensemble un bouton avec une petite animation sympa ?

On revient au sujet inital

Revenons au sujet initial de cet article : “Créer un bouton avec un effet ‘pressé’ en CSS”.

Voyons ensemble comment obtenir ce résultat avec HTML et CSS uniquement :

La structure HTML

Avant de s’attaquer au CSS, voyons l’architecture HTML qu’il faut mettre en place :

<a href="#" class="my-button">Je me lance ! <span>🚀</span></a>

Ah c’est tout ? C’était rapide !

Concrètement ici, j’imagine que rien ne vous semble compliqué de votre côté. On utilise une balise <a> dans lequel on a attribué une classe générique .my-button et qui contient du texte avec un emoji dans un span qui nous sera utile pour l’éloigner par la suite.

Passons au style !

Commençons par créer un bouton standard :

.my-button{
	background-color: #ffd43b;
	padding: 0.5rem 2.5rem;
	color: #183153;
	font-size: 1.15rem;
	font-family: "Baloo 2", cursive;
	font-weight: 600;
	border-radius: 15px;
		
	text-decoration: none;
}

.my-button span{
	margin-left: 5px;
}

On définit ici un padding horizontal et vertical, un background-color de couleur jaune, on ajuste le texte à l’intérieur, on retire le soulignement du texte mis par défaut par le navigateur et on décale notre emoji de fusée 🚀.

D’ailleurs ici, la police d’écriture utilisé est Baloo 2. Elle est disponible sur Google Fonts gratuitement.

Il vous suffit de l’importer dans votre code :

@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700&display=swap");

Voici le résultat que nous obtenons pour le moment :

Ajoutons maintenant le refief sur le bouton :

.my-button{
	// ...
	box-shadow: 0px 5px 0px 0px #d4a500;
}

Pour définir ce relief, il faut utiliser box-shadow. On définit toutes ses valeurs numériques à zéro sauf pour le déplacement vertical, où nous mettrons 5px.

Si vous ne savez pas à quoi correspondent toutes ces valeurs, je vous invite à vous rendre sur cssreference.io qui vous explique avec des démos chaque valeur de cette propriété.

On obtient alors :

3.. 2.. 1.. animez !

On a maintenant notre bouton, il ne nous reste plus qu’à l’animer.

.my-button {
	// ...
	transition: box-shadow 0.2s, transform 0.2s;
}

.my-button:hover {
	transform: translateY(5px);
	box-shadow: 0px 0px 0px 0px #d4a500;
}

Pour cela, avec la pseudo-classe :hover sur notre bouton, on utilise la propriété transform couplée à la fonction translateY() qui permet de décaler notre bouton de 5px vers le bas. Avec ça, on retire notre déplacement vertical sur le box-shadow.

Et pour finir on indique à notre bouton, qu’il faut faire les transitions sur box-shadow et transform.

Ce qui nous donne :

Ah j’adore ! Pas vous ?
Ajoutons un petit quelque chose lors du clic pour montrer à l’utilisateur que son action a bien fonctionné :

.my-button:active {
	// ...
	transition: box-shadow 0.2s, transform 0.2s, background: 0.1s;
}

.my-button:active {
	background-color: #ffc908;
}

Ici on va juste faire en sorte que le background ait une couleur plus sombre avec la pseudo-classe :active, tout en ajoutant une transition sur le bouton.

Et voici le résultat final :

Ce n’était vraiment pas compliqué, ça ne nous a pris que quelques minutes à réaliser et ça nous permet de retenir l’attention de nos utilisateurs un peu plus de temps.

Voici ce qui clôture cet article, j’espère que ce petit bouton vous plait. ^^

N’hésitez pas à aller faire un tour sur notre site, voir les autres articles ou même de rejoindre notre communauté sur Discord !

A très bientôt ! :D