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 !
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
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.
3ème étape
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.
4ème étape
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;
}
5ème étape
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;
}
6ème étape
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);
}
7ème étape
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().
Envie d'aller plus loin
Si vous voulez allez plus loin, par exemple pour positionner votre bouton par rapport à d'autres éléments sur votre page, rien de mieux que le faire avec l'incroyable fonctionnalité Flexbox CSS.
Allez jeter un petit oeil sur notre guide complet sur Flexbox pour apprendre à positionner votre bouton.
