For a menu or to encourage your readers to share your website, share buttons are essential elements to add to your website. Let’s discover how to make them more modern with a "neon" effect that will surround the icon selected by your user.
Step 1
Let's start by including Font Awesome 5.
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css”>
Step 2
Let's move on to the HTML code.
<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>Thanks to the Font Awesome library we added in the first step, each class starting with “fa” will be retrieved and transformed into an icon.
The fa-2x class allows doubling the size of the icon.
You can find all available icons on fontawesome.com/icons.
Step 3
Let's style the main class and the icons.
.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;
}
Step 4
Let's move on to styling the icons one by one.
.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;
}This allows us to define a different colored shadow for each icon.
Step 5
Let’s finish by modifying the color of each icon, one by one.
.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);
}
