Créer un bouton sur lequel les bordures de séparent en deux au survol peut sembler compliqué, et pourtant rien n'est plus facile à faire ! Découvrons ensemble dans cet article comment.
1ère étape
Le code HTML.
<button>
Voir la galerie
</button>Vous l’avez compris, rien de mieux que de partir d’un exemple “artistique” pour notre bouton au style archirectural, demandons donc à notre utilisateur d’avoir consulter la galerie.
2ème étape
Stylisons maintenant notre bouton.
button {
padding: 20px 50px;
font-size: 1.5rem;
cursor: pointer;
border: 0;
color: #fff;
background: transparent;
position: relative;
margin: 20px;
transition: all .25s;
}
3ème étape
Au tour des pseudos-éléments before et after.
button::after,button::before {
border: 3px solid #fff;
content: '';
position: absolute;
border-radius: inherit;
width: 100%;
height: 100%;
left: 0px;
bottom: 0px;
transition: all .25s;
}Dans cette étape nous stylisons le pseudo-élément before et le pseudo-élément after exactement de la même manière : sous forme d’un cadre.
Vous voyez déjà la supercherie ?
Nous allons simplement déclarer le premier élement (before) vers en haut à gauche, et le deuxième (after) vers en bas à droite. Nous aurons ainsi l’impression que nos bordures de dédoublent.
4ème étape
Finissons notre animation en stylisant nos pseudos-éléments au survol.
button:hover::after {
transform: translate(-5px, -5px);
}
button:hover::before {
transform: translate(5px, 5px);
}Alors, plutôt magique non ?
