"Old School" mais tellement tendance, découvrons comment créer un bouton original et clairement dans l'air du temps !
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
.
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.
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;
}
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);
}
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;
}
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é !
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.