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 !
Le code HTML.
<button class="btn">Créer un compte</button>
Pourquoi faire compliqué ? Coder, c’est fun !
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 dimensionsTranslate()
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.
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.
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.
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.
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.