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.
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 !
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.
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);
}
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”.
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);
}
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;
}
Que vous essayiez de scaler votre start-up, de créer votre premier site internet ou de vous reconvertir en tant que développeur, Believemy est votre nouvelle maison. Rejoignez-nous, évoluez et construisons ensemble l’avenir.