Créer un bouton façon “Old School”

"Old School" mais tellement tendance, découvrons comment créer un bouton original et clairement dans l'air du temps !

1ère étape

Commençons par le code HTML.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">

<div class="container">
  <a href="#">Lire l'article</a>
  <i class="fas fa-arrow-right"></i>
  <div class="bg"></div>
</div>

Dans ce petit projet, nous allons utiliser la librairie font-awesome. Elle nous permet d’ajouter très facilement des icônes grâce à la classe fas fa-arrow.right.

2ème étape

Utilisons la police "Lobster" de Google Fonts.

@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

Nous allons également utiliser une police assez “Old School” depuis Google Fonts. Cette police va donner une énorme touche à notre lien.

3ème étape

Stylisons la classe .container et son lien.

.container {
  font-size: 2rem;
  color: white;
  position: absolute;
  cursor: pointer;
}

.container a {
  color: white;
  text-decoration: none;
  font-family: 'Lobster', cursive;
}

4ème étape

Passons à l'icône et au survol du bouton.

.container i {
  margin-left: 5px;
  font-size: 1.2rem;
  transition: all .5s;
}

.container a:hover ~ i {
  transform: translateX(5px);
}

5ème étape

Au tour de la bordure du lien.

.bg {
  position: absolute;
  bottom: 3px;
  left: -4px;
  border-radius: 10px;
  width: 25%;
  height: 25%;
  z-index: -1;
  background-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 74%);
  transition: all .5s;
}

6ème étape

Agrandissons la bordure au survol.

.container a:hover ~ .bg {
  width: 85%;
}

Lorsque la souris de notre utilisateur ira sur notre lien nous agrandirons la largeur de la bordure à 85%.

Cet effet couplé à notre icône qui se décale vers le droite nous permet de terminer le bouton.

Et le tour est joué !