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.
1ère étape
Inclure Font Awesome.
<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 !
<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.
.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.
#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.
.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.
.menu .menuItems i {
font-size: 1.8rem;
}
.fa-whatsapp {
color: #25d366;
}
.fa-instagram {
color: #c32aa3;
}
.fa-facebook {
color: #273c75;
}
.fa-twitter {
color: #1da1f2;
}