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.
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.
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;
}
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.
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 ?
Que vous essayiez de scaler votre start-up, de créer votre premier site internet ou de vous reconvertir en tant que développeur, Believemy est votre nouvelle maison. Rejoignez-nous, évoluez et construisons ensemble l’avenir.