Hello readers, Today in this blog you’ll learn how to create Social Media Icons with CSS Glowing Effect. Previously I have shared Social Media Icons with Hover Animation using only HTML and CSS, now it’s time to create a Social Media Button with Glowing Effect.
The Social Media Widget is a simple widget that allows users to insert their social networks and connections profile URLs and other subscription options to show an icon to that social media site and more that open up in a separate browser window.
At first, these icons are in the initial stage where there is no glow effect. But when you hover on it, the specific hovered icon starts to glow. In the image, there is 2 Social Media Widget List with the same icons but which different glow colors. In the first widget, there are gold color glowing effects and in the second widget, there are default logo color glowing effects.
If you’re feeling difficulty understanding what I am saying. You can watch a full video tutorial on this program (Glowing Social Media Icons Widget).
Video Tutorial of CSS Glowing Social Media Icons on Hover
I hope you like these glowing effects and understanding the basic codes behind the creating of this Glowing Social Media Icons Widget. As you have seen in the video this is an effect that is based on only HTML & CSS. And, I believe a beginner who has a basic knowledge of HTML & CSS also can create this type of glow effect.
If you like this program (Glowing Social Media Icons Widget) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.
You might like this:
Glowing Social Media Icons using HTML & CSS [Source Codes]
To create this program (Glowing Social Media Icons Widget). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Glowing Social Icons</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<ul>
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
<li><i class="fab fa-youtube"></i></li>
</ul>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
*{
margin: 0;
padding: 0;
list-style: none;
}
body{
display: flex;
height: 100vh;
text-align: center;
align-items: center;
justify-content: center;
background: #262626;
}
ul{
display: flex;
}
ul li{
position: relative;
display: block;
color: #666;
font-size: 30px;
height: 60px;
width: 60px;
background: #171515;
line-height: 60px;
border-radius: 50%;
margin: 0 15px;
cursor: pointer;
transition: .5s;
}
ul li:before{
position: absolute;
content: '';
top: 0;
left: 0;
height: inherit;
width: inherit;
/* background: #d35400; */
border-radius: 50%;
transform: scale(.9);
z-index: -1;
transition: .5s;
}
ul li:nth-child(1):before{
background: #4267B2;
}
ul li:nth-child(2):before{
background: #1DA1F2;
}
ul li:nth-child(3):before{
background: #E1306C;
}
ul li:nth-child(4):before{
background: #2867B2;
}
ul li:nth-child(5):before{
background: #ff0000;
}
ul li:hover:before{
filter: blur(3px);
transform: scale(1.2);
/* box-shadow: 0 0 15px #d35400; */
}
ul li:nth-child(1):hover:before{
box-shadow: 0 0 15px #4267B2;
}
ul li:nth-child(2):hover:before{
box-shadow: 0 0 15px #1DA1F2;
}
ul li:nth-child(3):hover:before{
box-shadow: 0 0 15px #E1306C;
}
ul li:nth-child(4):hover:before{
box-shadow: 0 0 15px #2867B2;
}
ul li:nth-child(5):hover:before{
box-shadow: 0 0 15px #ff0000;
}
ul li:nth-child(1):hover{
color: #456cba;
box-shadow: 0 0 15px #4267B2;
text-shadow: 0 0 15px #4267B2;
}
ul li:nth-child(2):hover{
color: #26a4f2;
box-shadow: 0 0 15px #1DA1F2;
text-shadow: 0 0 15px #1DA1F2;
}
ul li:nth-child(3):hover{
color: #e23670;
box-shadow: 0 0 15px #E1306C;
text-shadow: 0 0 15px #E1306C;
}
ul li:nth-child(4):hover{
color: #2a6cbb;
box-shadow: 0 0 15px #2867B2;
text-shadow: 0 0 15px #2867B2;
}
ul li:nth-child(5):hover{
color: #ff1a1a;
box-shadow: 0 0 15px #ff0000;
text-shadow: 0 0 15px #ff0000;
}
/* ul li:hover{
color: #ffa502;
box-shadow: 0 0 15px #d35400;
text-shadow: 0 0 15px #d35400;
} */
That’s all, now you’ve successfully created a Glowing Social Media Icons Widget using only HTML & CSS. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.
Wow! This is really beautiful. Also I need to say: your content is very helpful and high quality. Thanks for share it with us. May I use this code in my first website? I’ll give the right credits on it 🙂
Yes, you can use it on your project! Credit isn’t mandatory.
The widget looks great, being a newbie at CSS I’m having trouble applying things to what I have in my website, some more detailed comments in your css would be very helpful, I have setup my html with links like this but I’m getting confued with what I already have:
The social icon widget looks great, and the rest of the site looks fine after it loads. Thank you!! I’m exploring the CSS to make sure I understand it.
QUESTION: The colors of all the icons change to magenta just after they load, but the hover colors are perfect. I have searched, but all the colors look correct.
Hi CodingNepal, i have a problem. I think something is wrong with my z-index. The effect doesnt show up when hovering over the icons. It does show up when I put the z-index of the ul li elements to a positive number, but then the gloweffect color is between the background of the icons and the icons.
This is awesome and there are so many options all for free.
I just wanna say that, I am a huge fan.
Thank you so much…Keep visiting.
imagine these buttons us footer , displaying always on the bottom of the website in a responsive way.
first of all great work much obliged , second , i cant quiet fit it where the footer usualy is. so i want down as a footer, any one knows the way. i know sounds silly but i cant quiet figure it out.
I can’t understand what you want
thanks for code…..
You’re most welcome
Great teaching thank you so much but i want to know how to fix when i put the link the font color turns to purple. I dont have Instagram I have discord pls tell me there
my discord: Umer_AR#7041
Use JavaScript for it
How can I help you?
can you help me with using sublime text 3
How I can make it clickable after animation?
when you add a link address, the hover on the icon font only works if your on the icon font, without link address the hover works if you hover over the white background
You have to change tag in css file too.
When adding the link address the text hover color doesn't work properly
Thank you 🙂
very nice
Hello
Kindly contact me on Instagram and I'll do it for you.
how to get it glowing for all time..
please tell me now ….
you are god teacher..
hiii
Please contact me on Instagram.
Heyy Bro, When I'm adding the link address the text color doesn't work properly??
Add anchor tag inside each li tag and insert the url of your prefer site inside href attribute of this anchor tag. For further help you can contact me on Instagram.
How do I add links to the icons?
Thank you…Keep visiting!
best
Yes you can use this widget on your website.
hi, thank you for your valuable lecture and code!
i want to use this source code for my website where i want to put my social-icon to right of my header( my name) follow up with nav bars so how can i use this? please explain in detail or show me a custom code….im a kind of newbie to the field
thanks
You're welcome. Keep visiting.
I can help you….
You should change HTML and CSS Tag Values use class in tags….
Your YouTube videos are Great and Really Helpful…..
Thanks for the Codes…..
I put this and my whole site links got messy…i'm not expert in coding can u help set this style only for this icons without effecting my other style on the site.
Thank you