Faire des boutons encerclés au survol

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.

Louis-Nicolas Leuillet

Mis à jour le 3 décembre 2024

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

Passons au code HTML.

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.

CSS

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

CSS

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

CSS

.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);
}

Catégorie : Développement