Créer un bouton design et "architectural"

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 ?