Glowing Neon Social Media Icons Using HTML & CSS
Welcome to the Codewithrandom blog. In this blog, We learn that how to create Glowing Neon Social Media Icons. We use HTML and CSS for these Social Media Icons.
I hope you enjoy our blog so let’s start with a basic html structure for Glowing Neon Social Media Icons.
HTML Code
<!doctype html> <html> <head> <title>Social Media Icons Neon Glow Effect</title> </head> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <body> <div class="container"> <div class="btn fb-btn"> <i class="fa fa-facebook" aria-hidden="true" id="fb"></i> </div> <div class="btn ig-btn"> <i class="fa fa-instagram" aria-hidden="true" id="ig"></i> </div> <div class="btn tw-btn"> <i class="fa fa-twitter" aria-hidden="true" id="tw"></i> </div> <div class="btn tw-btn"> <i class="fa fa-github" aria-hidden="true" id="tw"></i> </div> <div class="btn tw-btn"> <i class="fa fa-youtube" aria-hidden="true" id="tw"></i> </div> </div> </body> </html>
There is all the html code for the social media icons. Now, you can see output without Css. then we write Css Code Style Icon and Give Animation Of Glowing icons.
50+ HTML, CSS & JavaScript Projects With Source Code
Output
CSS Code
html,body
{
margin: 0;
padding: 0;
align-items: center;
justify-content: center;
height: 100%;
background: #fff;
}
.container
{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.btn
{
width: 100px;
height: 100px;
background-color: #fafafa;
display: flex;
align-items: center;
justify-content: center;
margin-left: 2em;
margin-right: 1em;
cursor: pointer;
transition: all 0.3s;
border-radius: 10px;
}
i.fa
{
font-size: 44px;
}
#fb
{
color: #006fff;
text-shadow: 0 0 30px #006fff;
}
#ig
{
color: #ff5f40;
text-shadow: 0 0 30px #ff5f40;
}
#tw
{
color: #00acff;
text-shadow: 0 0 30px #00acff;
}
.btn.fb-btn
{
box-shadow: 0 20px 20px -17px rgba(0,111,255,0.53);
}
.btn.fb-btn:hover
{
transform: scale(1.2);
box-shadow: 0 30px 45px -15px rgba(0,111,255,0.65);
}
.btn.ig-btn
{
box-shadow: 0 20px 20px -17px rgba(255,16,39,0.5);
}
.btn.ig-btn:hover
{
transform: scale(1.2);
box-shadow: 0 30px 45px -15px rgba(255,16,39,0.57);
}
.btn.tw-btn
{
box-shadow: 0 20px 20px -17px rgba(0,255,255,0.53);
}
.btn.tw-btn:hover
{
transform: scale(1.2);
box-shadow: 0 30px 45px -15px rgba(0,111,255,0.6);
}Now we have completed our Glowing Neon Social Media Icons. Here is our final updated output HTML + CSS.
Responsive Gym Website Using HTML ,CSS & JavaScript
Final Output Of Glowing Neon Social Media Icons
Create A Travel Website Using HTML & CSS
Hope you like the Glowing Neon Social Media Icons. you can see output project screenshots. See our other blogs and gain knowledge in front-end development.
Thank you!
In this post, we learn how to create Glowing Neon Social Media Icons Using HTML and CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
Written by – Code With Random/Anki
