Aujourd’hui je trainais un peu sur le web et j’ai vu un bouton qui me plaisait assez bien. J’ai donc décidé de le refaire à ma sauce et de t’expliquer comment faire.
Présentation
Structure HTML
Au niveau de la structure HTML, rien de bien sorcier. Dans le head je link un fichier de style et dans le body je place un bouton avec une classe.
<!doctype html>
<html class="no-js" lang="fr">
<head>
<meta charset="UTF-8">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Button</title>
<link rel="stylesheet" href="stylesheets/style.css" media="all">
</head>
<body>
<a href="#" class="button_anime"><span></span>PUSH ME</a>
</body>
</html>SASS
Comme je travaille toujours avec SASS, je crée un fichier scss qui sera compilé vers mon fichier css dont j’ai fait référence dans le head.
Dedans j’inclus Compass, je fais appel à une GoogleFont et je définis deux variables de couleur.
@import "compass";
@import url('https://fonts.googleapis.com/css?family=Luckiest+Guy');
$color: white;
$bg: #6fce4a;Base
Maintenant, je vais styliser l’état de base du bouton lorsqu’il n’est pas survolé. Je commence par mettre un background au body de la même couleur que la variable $bg. Ensuite, je stylise mon bouton de manière relativement standard et j’applique un box-shadow de 10px en fonçant la couleur du fond de 10%, histoire de donner un petit d’effet d’ombre et de distinguer les bords du bouton.
body{
background: $bg;
}
.button_anime{
font-family: 'Luckiest Guy', cursive;
position: relative;
color: $color;
text-decoration: none;
font-size: 30px;
padding: 15px;
background: $bg;
@include box-shadow(0px 0px 10px 0px darken($bg,10%));
}
Coins
Pour réaliser les coins, je vais utiliser les pseudo-éléments :before et :after du bouton et du span. Ceux du bouton vont me permettre de faire les deux coins du dessus et ceux du span les coins du dessous.
Je crée une variable $size qui sera la taille de base des coins. De cette manière, je pourrais les modifier plus facilement en une seule fois.
.button_anime{
//...
$size : 10px;
&:after, &:before, span:after, span:before{
position: absolute;
background: $color;
content: "";
width: $size;
height: $size;
}
$offset: -2px;
&:after{
left: $offset;
top: $offset;
}
&:before{
right: $offset;
top: $offset;
}
span:after{
bottom: $offset;
left: $offset;
}
span:before{
bottom: $offset;
right: $offset;
}
}
L’offset de -2px, c’est en fait ce qui va déterminer la taille visible du bord, car la seconde étape sera de placer un z-index de -1 sur les coins pour qu’ils passent en dessous du bouton.
&:after, &:before, span:after, span:before{
//...
z-index: -1;
}
Hover
Lorsque le bouton est au survol de la souris (&:hover), je change la largeur et hauteur de chaque coin pour qu’elles soient égales à la moitié du bouton.
Pour améliorer le design du bouton, je réinitialise le box-shadow pour ne pas affecter la couleur du bord. J’ajoute un text-shadow pour faire ressortir légèrement le texte et j’applique également un box-shadow sur chaque coin pour faire un genre d’effet néon.
&:hover{
@include box-shadow(0px 0px 0px 0px darken($bg,10%));
@include text-shadow(darken($bg,10%) 0px 0px 3px);
&:after, &:before, span:after, span:before{
width: calc(50% + 2px);
height: calc(50% + 2px);
@include box-shadow(0px 0px 10px 0px $color);
}
}
Animation
La touche finale ! L’ajout de deux transitions, l’une sur le bouton et l’autre sur les pseudo-éléments :before et :after.
Voici l’entièreté du code !
@import "compass";
@import url('https://fonts.googleapis.com/css?family=Luckiest+Guy');
$color: white;
$bg: #6fce4a;
body{
background: $bg;
}
.button_anime{
display: inline-block;
font-family: 'Luckiest Guy', cursive;
position: relative;
color: $color;
text-decoration: none;
font-size: 30px;
padding: 15px;
background: $bg;
@include box-shadow(0px 0px 10px 0px darken($bg,10%));
@include transition(0.4s);
$size : 10px;
&:after, &:before, span:after, span:before{
position: absolute;
background: $color;
content: "";
width: $size;
height: $size;
z-index: -1;
@include transition(0.4s);
}
$offset: -2px;
&:after{
left: $offset;
top: $offset;
}
&:before{
right: $offset;
top: $offset;
}
span:after{
bottom: $offset;
left: $offset;
}
span:before{
bottom: $offset;
right: $offset;
}
&:hover{
@include box-shadow(0px 0px 0px 0px darken($bg,10%));
@include text-shadow(darken($bg,10%) 0px 0px 3px);
&:after, &:before, span:after, span:before{
width: calc(50% + 2px);
height: calc(50% + 2px);
@include box-shadow(0px 0px 10px 0px $color);
}
}
}Démo
12/08/2018