Créer un bouton de partage de réseaux-sociaux

Pour vos articles de blog ou sur les pages qui présentent vos projets depuis un portfolio, présenter un bouton moderne et non intrusif pour permettre à vos visiteurs de partager votre site internet ou de se rendre sur vos réseaux-sociaux est idéal. Voyons comment réaliser ce type de bouton ensemble dans cet article.

Louis-Nicolas Leuillet

Mis à jour le 3 décembre 2024

Créer un bouton de partage de réseaux-sociaux

1ère étape

Inclure Font Awesome.

HTML

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css”>

Pour afficher les icônes des réseaux-sociaux, nous allons utiliser une librairie faite pour ça : Font Awesome !

2ème étape

Place au HTML !

HTML

<div class="box">
  <input type="checkbox"id="checkbox" />
  <div class="menu">
    <a href="#">
      <div class="menuItems">
        <i class="fab fa-whatsapp"></i>
      </div>
    </a>
    <a href="#">
      <div class="menuItems">
        <i class="fab fa-instagram"></i>
      </div>
    </a>
    <a href="#">
      <div class="menuItems">
        <i class="fab fa-facebook"></i>
      </div>
    </a>
    <a href="#">
      <div class="menuItems">
        <i class="fab fa-twitter"></i>
      </div>
    </a>
  </div>
</div>

Chaque classe fab est une classe utilisée par Font Awesome.

Cette librairie va se charger toute seule d’afficher les icônes aux endroits auxquels nous déclarons nos classes.

3ème étape

Stylisons maintenant la classe box et la checkbox.

CSS

.box {
  display: flex;
}

#checkbox {
  width: 65px;
  height: 65px;
  cursor: pointer;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  outline: none;
  background: white;
  position: relative;
}
#checkbox:hover {
  background: rgba(255, 255, 255, .7);
}

4ème étape

Passons à l'élément before.

CSS

#checkbox::before {
  content: '\f1e0';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'font awesome 5 free';
  font-weight: 700;
  font-size: 1.5rem;
  color: rgb(41, 41, 41);
  transition: all 1.5s;
}
#checkbox:checked::before {
  content: '\f00d';
}
#checkbox:checked ~ .menu {
  width: 264px; /* 4 * 65 + 4 * 1 pour la bordure */
}

Lorsque nous écrivons “\f1e0” ou encore “\f00d”, il s’agit en réalité d’un code Font Awesome pour dire que nous souhaitons à la voie une icône de partage et une croix.

L’icône de partage s’affiche lorsque nous n’avons pas cliqué sur notre checkbox.

L’icône en forme de croix s’affiche lorsque nous avons cliqué dessus.

Ceci permet de dire à notre utilisateur qu’il peut fermer le menu. Elles s’affichent car nous utilisons la police de Font Awesome “font awesome 5 free”.

5ème étape

Stylisons le menu.

CSS

.menu {
  width: 0;
   display: flex;
  overflow: hidden;
  transition: all .5s;
}
.menu .menuItems {
  width: 65px;
  height: 65px;
  background: white;
  border-left: 1px solid rgb(165, 165, 165);
  display: flex;
  justify-content: center;
  align-items: center;
}
.menu .menuItems:hover {
  background: rgba(255, 255, 255, .7);
}

6ème étape

Il ne reste plus qu'à changer la couleur de chaque icône.

CSS

.menu .menuItems i {
  font-size: 1.8rem;
}
.fa-whatsapp {
  color: #25d366;
}
.fa-instagram {
  color: #c32aa3;
}
.fa-facebook {
  color: #273c75;
}
.fa-twitter {
  color: #1da1f2;
}

Catégorie : Développement