Créer un bouton en 3 dimensions (3D) animé

Découvrons ensemble dans cet article comment créer un bouton en trois dimensions qui donnera une touche de douceur et de perspectives à vos projets !

1ère étape

Le code HTML.

<button class="btn">Créer un compte</button>

Pourquoi faire compliqué ? Coder, c’est fun !

2ème étape

Stylisons pour commencer le bouton.

.btn {
  width: 195px;
  height: 40px;
  font-size: 1.1rem;
  font-weight: 700;
  font-family: arial;
  cursor: pointer;
  outline: none;
  border: none;
  transform: rotate(-30deg) skewX(25deg) translate(0, 0);
  box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.5);
  background: #e76f6f;
  color: white;
  transition: all .5s;
  position: relative;
}

Dans cette étape, nous utilisons des fonctions CSS très différentes de ce que vous pourriez avoir l’habitude d’utiliser : rotate, skewX et translate.

• Rotate() nous permet de rotationner le bouton.
• SkewX() nous permet de “compresser” le bouton pour nous permettre d’avoir cet effet de bouton en trois dimensions
• Translate() nous permet de bouger et déplacer notre bouton. Pour le moment on l’initialise à sa position d’origine, mais nous modifierons ça au survol.

3ème étape

Stylisons maintenant le pseudo-élément before.

.btn::before {
  content: '';
  position: absolute;
  top: 5px;
  left: -10px;
  width: 10px;
  height: 100%;
  background: #795a5a;
  transform: skewY(-45deg);
}

Ici, nous créons le premier côté de notre bouton, ce qui va nous donner cet effet de véritable bouton en trois dimensions.

Nous utilisons cette fois-ci la fonction skewY et non pas skewX qui a exactement le même objectif mais sur l’axe vertical : distordre notre bouton.

4ème étape

Faisons pareil avec after.

.btn::after {
  content: '';
  position: absolute;
  top: 40px;
  left: -5px;
  width: 195px;
  height: 10px;
  background: #795a5a;
  transform: skewX(-45deg);
}

Attention : nous utilisons skewX et pas skewY ici.

5ème étape

Pour finir, il nous reste à soulever notre bouton au survol.

.btn:hover {
  transform: rotate(-30deg) skewX(25deg) translate(20px, -20px);
  box-shadow: -30px 30px 10px rgba(0, 0, 0, 0.5);
}

Au survol du bouton, nous utilisons la fonction translate pour soulever notre bouton de 20px vers le haut. Nous précisons -20px pour éviter que le bouton ne se décale vers la droite.