Bordure animée en CSS

Aujourd’hui nous allons réaliser un projet très simple mais qui fait son effet: une bordure animée en CSS ! Évidemment (vous vous en doutez), ça n’est pas aussi simple. Une bordure ne peut pas s’animer d’elle-même ! Nous allons donc voir comment tricher afin d’obtenir cet effet très simplement !

Le (tout petit) body

Ici l’idée est de faire très simple, nous allons donc créer uniquement un bouton de classe .square-btn et une div à l’intérieur pour notre logo:

<button class="square-btn">
	<div class="instagram"></div>
</button>

Nous n’allons pas avoir besoin de beaucoup plus, passons donc à l’essentiel. Mais avant de nous attaquer à l’élément, préparons notre body afin que le contenu soit bien centré:

body {
	height: 100vh;
	margin: auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

Créer le bouton

Nous allons retirer le style de base du bouton avec un border: 0 et un background qu’on va rendre transparent. Ensuite comme on veut un carré, on va initier la height et la width à 100px. Ensuite on gère le flex pour centrer tout son futur contenu et on met la position en absolute pour le préparer à recevoir tous les futurs éléments. Et enfin comme il s’agit d’un élément cliquable, on met son cursor en pointer afin d’indiquer à l’utilisateur qu’il peut interagir avec:

.square-btn {
	border: 0;
	background-color: transparent;
	height: 100px;
	width: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	cursor: pointer;
}

Maintenant, parlons de la bordure. Pour l’animer, comme dit plus haut, il ne faut pas que ce soit une bordure classique. Pour tricher ce que nous allons faire c’est créer deux carrés par dessus. L’un fera la bordure top et left et l’autre right et bottom. Quand le bouton sera en état normal, le carré fera toute la hauteur mais en width 0, ce qui fera apparaître une bordure sur le côté uniquement. Et quand on hoverera le bouton, la height passera à 0 et la width à 100%. Ainsi la bordure ne se verra que sur le dessus/dessous et pas sur les côtés.

Si ça ne vous paraît pas super clair, c’est parce qu’il est tard lors de l’écriture de cet article et que j’ai bu du cidre. Mais promis une fois que le projet sera lancé vous comprendrez !

Commençons donc par créer deux éléments before et after sur le bouton. On met son content avec une string vide et on lui donne une width de 0 et une height de 100%. Afin que l’élément s’affiche par dessus le reste, on met la position en absolute. On crée une border en solid et en noir, on ajoutera la taille par la suite. Puis pour que l’animation se fasse, on ajoute une transition-duration:

.square-btn:before,
.square-btn:after {
	content: "";
	width: 100%;
	height: 0;
	border: solid #000;
	position: absolute;
	transition-duration: 0.5s;
}

Sur l’élément before, qui sera donc le haut et la gauche, on met une width de 2px sur la bordure top et left. Et on va aussi positionner l’élément en haut à gauche de son parent:

.square-btn:before {
	border-width: 2px 0 0 2px;
	top: 0;
	left: 0;
}

Pour le after, pareil mais en inversant tout, on le met en bas à droite et la bordure à 2px en bas et à droite:

.square-btn:after {
	border-width: 0 2px 2px 0;
	bottom: 0;
	right: 0;
}

Et voici nos bordures qui apparaissent !

D’accord mais elle n’est pas très animée, ta bordure animée !

Eh bien pour ça, nous n’allons avoir besoin que de quelques lignes ! Au moment où on hover notre bouton, nous allons nous contenter de passer la height à 100% et la width à 0:

.square-btn:hover:before,
.square-btn:hover:after {
	height: 100%;
	width: 0;
}

Et voilà 🎉 ! Quand on hover, on voit la bordure qui se balade comme si elle glissait le long de notre élément ! Si le fonctionnement n’est pas clair, mettez un background-color red sur le before et regardez le résultat.

Le petit plus: le logo instagram en CSS

Je n’allais quand même pas vous laisser, ni vous forcer à utiliser FontAwesome ! Voyons donc comment créer le logo uniquement en utilisant du CSS.

Tout d’abord, pour le contour, prenons notre élément, donnons-lui une taille et une bordure de 3px en noir. On ajoute une position: relative pour les éléments qui seront dedans et un border-radius à 8px:

.instagram {
	width: 30px;
	height: 30px;
	border: 3px solid #000;
	border-radius: 8px;
	position: relative;
}

Ensuite nous allons créer un rond avec notre before ! On lui met un content vide et une position en absolute. Ensuite on lui met une taille en 10px*10px avec un border-radius de 50% pour en faire un rond parfait. Après ça on ajoute une bordure de 3px comme sur le parent. Puis on la positionne au centre:

.instagram:before {
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	border: 3px solid #000;
	left: 7px;
	top: 7px;
	border-radius: 50%;
}

Pour le suivant, rebelotte ! À ceci près que le rond fera 4px*4px et qu’il sera à 4px des bords haut et gauche:

.instagram:after {
	content: "";
	position: absolute;
	width: 4px;
	height: 4px;
	background-color: #000;
	right: 4px;
	top: 4px;
	border-radius: 50%;
}

Et tadam. Un petit logo tout frais tout neuf, et 100% en CSS !

Vous savez désormais comment réaliser un bouton avec une superbe bordure animée qui glisse comme par magie. Et si vous voulez aller plus loin, voyez comment on peut simplement recréer l’effet background de messenger.