Glowing Social Media Icons Widget

byCodingFlicks -November 24, 2020

0

This blog will make a simple glowing animation on social media icons using HTML and CSS. This kind of glowing CSS animation is stylish and makes a widget looks beautiful. I have shared some CSS animation based snippet in this blog before, and today we will make a nice-looking social media button hover animation effect.

The widget of Social Media is something to display icons of their social networks and connections and other subscription options to show icons on those social media sites and much more that opens in a separate browser window.

Initially, the icons remain as it is, but it will give a glowing effect around it when we hover over a specific icon. I have taken four social media icons and gave each of them a specific luminous color when we hover over them. You can change the color when you modify the snippet on your own and see how it looks. See the video demo below how it will look like at the end of the coding.

I hope you watched the video and get some idea about how it will look like in the end. In the HTML part, I have taken an unordered list and four list items with a separate font-awesome icon on each. You have to link font-awesome CDN before start coding for this snippet; otherwise, the icons will not appear.

You May Also Like:

in the CSS part, I have reset the default margin padding of the document by giving the body tag a margin and padding of zero. I also set a specific blackish background color for the entire document. After that, I did some basic CSS styling to make the project in the middle. I made the social media icon box a round shape and gave them a background-color and color for the default stage. I then used CSS pseudo-class and gave each 'a' element a different background color, and set a glowing hover effect for each using box-shadow and text-shadow effect. Without further explanation, I am providing you the code to play around with the code by yourself.

Glowing Social Media Icons Widget (Source Code);

To make this snippet, please create an HTML file and a CSS file. Then link the CSS file to your HTML file. Please copy the code below and paste them into the individual files and save.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>glowing-effect-social-media-icons-widget.html</title>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<ul>
		<li>
			<a href="#"><i class="fa fa-facebook"></i></a>
		</li>
		<li>
			<a href="#"><i class="fa fa-youtube"></i></a>
		</li>
		<li>
			<a href="#"><i class="fa fa-dribbble"></i></a>
		</li>
		<li>
			<a href="#"><i class="fa fa-pinterest"></i></a>
		</li>
	</ul>
</body>
</html>

CSS

body {
	margin: 0;
	padding: 0;
	background: #262626;
}
ul {
	margin: 0;
	padding: 0;
	display: flex;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
ul li {
	list-style: none;
	margin: 0 15px;
}
ul li a {
	position: relative;
	display: block;
	width: 90px;
	height: 90px;
	text-align: center;
	line-height: 90px;
	background: #333;
	border-radius: 50%;
	font-size: 35px;
	color: #666;
	transition: .5s;
}
ul li a:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	transition: .5s;
	transform: scale(.9);
	z-index: -1;
}
ul li:nth-child(1) a:before {
	background: #ffee10;
}
ul li:nth-child(2) a:before {
	background: #0097BC;
}
ul li:nth-child(3) a:before {
	background: #e50000;
}
ul li:nth-child(4) a:before {
	background: #00ff2a;
}
ul li a:hover:before {
	transform: scale(1.1);
	box-shadow: 0 0 15px #ffee10;
}
ul li a:hover {
	color: #ffee10;
	box-shadow: 0 0 5px #ffee10;
	text-shadow: 0 0 5px #ffee10;
}
ul li:nth-child(2) a:hover:before {
	transform: scale(1.1);
	box-shadow: 0 0 15px #0097BC;
}
ul li:nth-child(2) a:hover {
	color: #0097BC;
	box-shadow: 0 0 15px #0097BC;
	text-shadow: 0 0 5px #0097BC;
}
ul li:nth-child(3) a:hover:before {
	transform: scale(1.1);
	box-shadow: 0 0 15px #e50000;
}
ul li:nth-child(3) a:hover {
	color: #e50000;
	box-shadow: 0 0 15px #e50000;
	text-shadow: 0 0 5px #e50000;
}
ul li:nth-child(4) a:hover:before {
	transform: scale(1.1);
	box-shadow: 0 0 15px #00ff2a;
}
ul li:nth-child(4) a:hover {
	color: #00ff2a;
	box-shadow: 0 0 15px #00ff2a;
	text-shadow: 0 0 5px #00ff2a;
}

I hope you liked this. Please follow our social media profiles and stay connected with this blog. Thank you for visiting us, and keep visiting for more snippets like this soon.

Please do not enter any spam link in the comment box.