Social Media Icon With Cool Hover Effects – Snake Border

Demo Download

Today in this video you will see how to animate social icon border with snake effects on your website. As you can see to click demo button. It is very easy to add this kind of animation icon effect on your website. So without wasting any time let’s quickly start this tutorial.

Steps to Create Animated Snake Border Effect using HTML & CSS

To create a animated snake border effect we need to follow the below steps.

  1. Write an HTML Markup
  2. Write CSS

1. Write an HTML Markup

First we need to create an index.html file and paste the following HTML markup in it.

<!--
Author: TesWesM
Website: https://teswesm.com/
-->
<!DOCTYPE html>
<html>
<head>
	<title>CSS Animation Effects</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
	<ul>
		<li><a href="#">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<i class="fa fa-facebook" aria-hidden="true"></i>
		</a></li>

		<li><a href="#">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<i class="fa fa-twitter" aria-hidden="true"></i>
		</a></li>

		<li><a href="#">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<i class="fa fa-google-plus" aria-hidden="true"></i>
		</a></li>

		<li><a href="#">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<i class="fa fa-linkedin" aria-hidden="true"></i>
		</a></li>

		<li><a href="#">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<i class="fa fa-instagram" aria-hidden="true"></i>
		</a></li>
	</ul>
</body>
</html>

As you can see above HTML file here i linked a style.css file and also linked to font-awesome.min.css. After that we create ul, li & span and paste social icone code in it.

2. Write CSS

Now we need to Style our animation, paste the following styles in CSS either in head section or you can also include external style sheet.

/*
Author: TesWesM
Website: https://teswesm.com/
*/
body{
	margin: 0;
	padding: 0;
}
ul{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	margin: 0;
	padding: 0;
	display: flex;
}
ul li{
	list-style: none;
}
ul li a {
	display: block;
	position: relative;
	width: 150px;
	height: 150px;
	line-height: 150px;
	font-size: 60px;
	text-align: center;
	text-decoration: none;
	color: #262626;
	margin: 0 10px;
}
ul li a:hover {
	color: red;
	transition: 1s;
}
ul li a span {
	position: absolute;
	transition: transform 0.5s;
}




ul li a span:nth-child(1)
{
	width: 100%;
	height: 2px;
	background: #262626;
	top: 0;
	left: 0;
	transform-origin: right;
}
ul li a:hover span:nth-child(1)
{
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .5s;
}

ul li a span:nth-child(3)
{
	width: 100%;
	height: 2px;
	background: #262626;
	bottom: 0;
	left: 0;
	transform-origin: left;
}
ul li a:hover span:nth-child(3)
{
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .5s;
}




ul li a span:nth-child(2)
{
	top: 0;
	left: 0;
	transform: scaleY(0);
	transform-origin: bottom;
}
ul li a:hover span:nth-child(2)
{
	width: 2px;
	height: 100%;
	background: red;
	transform: scaleY(1);
	transform-origin: top;
	transition: transform .5s;
}

ul li a span:nth-child(4)
{
	top: 0;
	right: 0;
	transform: scaleY(0);
	transform-origin: top;
}
ul li a:hover span:nth-child(4)
{
	width: 2px;
	height: 100%;
	background: red;
	transform: scaleY(1);
	transform-origin: bottom;
	transition: transform .5s;
}

Above CSS is very simple, here we write class of above mention in code.

Conclusion

Today we learnt how to create animated snake border effects on icon using HTML & CSS, you can add multiple effects just by adding the social icon in HTML markup.

If you found this tutorial helpful, share it with your friends and developers group.

Demo Download

I spent several hours to create this tutorial, if you want to say thanks so like my page on Facebook and share it.

Facebook Official Page: T-Code Scripts

Leave a Reply

Your email address will not be published. Required fields are marked *