Afficher un bouton de partage des réseaux-sociaux sur son site permet d'augmenter le nombre de visites. De nos jours, il est devenu incontournable de proposer ce genre de bouton dès lors que nous proposons des articles ou des présentations de projet. Découvrons ensemble comment mettre en place ce genre de bouton dans cet article !
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”>
Occupons-nous du code HTML.
<div class="share">
<ol>
<li><a href="#"><i class="fab fa-instagram fa-2x"></i></a></li>
<li><a href="#"><i class="fab fa-facebook fa-2x"></i></a></li>
<li><a href="#"><i class="fab fa-whatsapp fa-2x"></i></a></li>
<li><a href="#"><i class="fab fa-twitter fa-2x"></i></a></li>
</ol>
<div class="toggle"></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.
Stylisons le bouton "partager".
.toggle {
width: 50px;
height: 50px;
background: #c70039;
border-radius: 50%;
cursor: pointer;
position: relative;
}
.toggle::before {
content: '\f1e0';
width: 100%;
height: 100%;
position: absolute;
color: white;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
text-align: center;
line-height: 50px;
font-size: 22px;
}
Il est très important d'ajouter la police Font Awesome 5 Free et de préciser que nous souhaitons utiliser une police grasse (font-weight) de 900.
Stylisons maintenant la liste à puces de notre bouton.
.share.active .toggle::before {
content: '\f00d';
font-size: 2rem;
}
.share {
position: fixed;
bottom: 70px;
right: 70px;
}
.share ol {
position: absolute;
width: 50px;
height: 50px;
}
Stylisons chaque lien.
.share ol li {
position: absolute;
width: 50px;
height: 50px;
background: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all .3s;
opacity: 0;
}
.share ol li a {
color: black;
}
.share.active ol li {
opacity: 1;
transition: all .3s;
}
Déplaçons chacun des items d'une certaine distance afin de les faire apparaître de chaque côté de notre bouton.
.share.active ol li:nth-child(1) {
transition-delay: .1s;
transform: translateX(60px);
}
.share.active ol li:nth-child(2) {
transition-delay: .2s;
transform: translateY(60px);
}
.share.active ol li:nth-child(3) {
transition-delay: .3s;
transform: translateX(-60px);
}
.share.active ol li:nth-child(4) {
transition-delay: .4s;
transform: translateY(-60px);
}
Terminons notre bouton de partage en détectant le clic de notre utilisateur pour ajouter ou retirer la classe active.
const toggle = document.querySelector('.toggle');
toggle.addEventListener('click', () => {
const shareBtn = document.querySelector('.share');
shareBtn.classList.toggle('active');
});
Lorsque nous cliquons sur le bouton “partager”, nous demandons à notre navigateur d’ajouter la classe “active” si elle est présente. Sinon, nous demandons de la retirer grâce à toggle()
.
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.