Pour un menu ou pour proposer à vos lecteurs de partager votre site internet, des boutons de partage sont des éléments à impérativement ajouter à votre site internet. Découvrons comment les rendre plus moderne grâce à un effet « néon » qui entourera le l’icône sélectionnée par votre utilisateur.
1ère étape
Incluons pour commencer Font Awesome 5.
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css”>
2ème étape
Passons au code HTML.
<div class="main center">
<div class="icon center">
<i class="fab fa-facebook fa-2x"></i>
</div>
<div class="icon center">
<i class="fab fa-instagram fa-2x"></i>
</div>
<div class="icon center">
<i class="fab fa-whatsapp fa-2x"></i>
</div>
<div class="icon center">
<i class="fab fa-twitter fa-2x"></i>
</div>
</div>Grâce à la librairie Font Awesome que nous avons ajouté à la première étape, chaque classe commençant par “fa” sera récupérée et transformée par une icône.
La classe fa-2x permet de doubler la taille de l’icône.
Vous pouvez retrouver toutes les icônes disponibles sur fontawesome.com/icons.
3ème étape
Stylisons la classe main et les icônes.
.main {
height: 100vh;
}
.icon {
width: 65px;
height: 65px;
margin: 20px;
cursor: pointer;
border-radius: 50px;
transition: all .4s;
}
.center {
display: flex;
justify-content: center;
align-items: center;
}
4ème étape
Passons au design des icônes une par une.
.icon:nth-child(1):hover {
box-shadow: 0 0 0 10px #1877f2;
}
.icon:nth-child(2):hover {
box-shadow: 0 0 0 10px #c32aa3;
}
.icon:nth-child(3):hover {
box-shadow: 0 0 0 10px #25d366;
}
.icon:nth-child(4):hover {
box-shadow: 0 0 0 10px #1da1fe;
}Ceci nous permet de définir une ombre de couleur différente pour chaque icône.
5ème étape
Terminons en modifiant la couleur des icônes, une par une.
.fa-facebook {
color: #1877f2;
filter: drop-shadow(0 0 10px #1877f2);
}
.fa-instagram {
color: #c32aa3;
filter: drop-shadow(0 0 10px #c32aa3);
}
.fa-whatsapp {
color: #25d366;
filter: drop-shadow(0 0 10px #25d366);
}
.fa-twitter {
color: #1da1f2;
filter: drop-shadow(0 0 10px #1da1f2);
}
