Créer un bouton de partage collé en bas de page

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 !

LLLouis-Nicolas Leuillet

Mis à jour le 3 décembre 2024

Créer un bouton de partage collé en bas de page

1ère étape

Incluons pour commencer Font Awesome 5.

HTML

<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.

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".

CSS

.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.

CSS

.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.

CSS

.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.

CSS

.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.

JAVASCRIPT

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.

Catégorie : Développement