Social Media Icon Designs

A set of Social media icon design and hover animation.

• First, we will create the unordered list
• In this demo, we've used Font awesome icons
• This demo is crafted using basic CSS transition and transformation property.

HTML

<ul class="social-icon-list after-effect shutter-left">
	<li class="fb"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
	<li class="tw"><a href="#"><i class="fab fa-twitter"></i></a></li>
	<li class="yt"><a href="#"><i class="fab fa-youtube"></i></a></li>
	<li class="li"><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
	<li class="gp"><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
	<li class="sk"><a href="#"><i class="fab fa-skype"></i></a></li>
	<li class="gh"><a href="#"><i class="fab fa-github"></i></a></li>
</ul>
<ul class="social-icon-list after-effect shutter-right">
	<li class="fb"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
	<li class="tw"><a href="#"><i class="fab fa-twitter"></i></a></li>
	<li class="yt"><a href="#"><i class="fab fa-youtube"></i></a></li>
	<li class="li"><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
	<li class="gp"><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
	<li class="sk"><a href="#"><i class="fab fa-skype"></i></a></li>
	<li class="gh"><a href="#"><i class="fab fa-github"></i></a></li>
</ul>
<ul class="social-icon-list after-effect shutter-top">
	<li class="fb"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
	<li class="tw"><a href="#"><i class="fab fa-twitter"></i></a></li>
	<li class="yt"><a href="#"><i class="fab fa-youtube"></i></a></li>
	<li class="li"><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
	<li class="gp"><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
	<li class="sk"><a href="#"><i class="fab fa-skype"></i></a></li>
	<li class="gh"><a href="#"><i class="fab fa-github"></i></a></li>
</ul>
<ul class="social-icon-list after-effect shutter-bottom">
	<li class="fb"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
	<li class="tw"><a href="#"><i class="fab fa-twitter"></i></a></li>
	<li class="yt"><a href="#"><i class="fab fa-youtube"></i></a></li>
	<li class="li"><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
	<li class="gp"><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
	<li class="sk"><a href="#"><i class="fab fa-skype"></i></a></li>
	<li class="gh"><a href="#"><i class="fab fa-github"></i></a></li>
</ul>
<ul class="social-icon-list after-effect shutter-left-right">
	<li class="fb"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
	<li class="tw"><a href="#"><i class="fab fa-twitter"></i></a></li>
	<li class="yt"><a href="#"><i class="fab fa-youtube"></i></a></li>
	<li class="li"><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
	<li class="gp"><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
	<li class="sk"><a href="#"><i class="fab fa-skype"></i></a></li>
	<li class="gh"><a href="#"><i class="fab fa-github"></i></a></li>
</ul>
<ul class="social-icon-list after-effect shutter-right-left">
	<li class="fb"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
	<li class="tw"><a href="#"><i class="fab fa-twitter"></i></a></li>
	<li class="yt"><a href="#"><i class="fab fa-youtube"></i></a></li>
	<li class="li"><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
	<li class="gp"><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
	<li class="sk"><a href="#"><i class="fab fa-skype"></i></a></li>
	<li class="gh"><a href="#"><i class="fab fa-github"></i></a></li>
</ul>
<ul class="social-icon-list after-effect shutter-top-bottom">
	<li class="fb"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
	<li class="tw"><a href="#"><i class="fab fa-twitter"></i></a></li>
	<li class="yt"><a href="#"><i class="fab fa-youtube"></i></a></li>
	<li class="li"><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
	<li class="gp"><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
	<li class="sk"><a href="#"><i class="fab fa-skype"></i></a></li>
	<li class="gh"><a href="#"><i class="fab fa-github"></i></a></li>
</ul>
<ul class="social-icon-list after-effect shutter-bottom-top">
	<li class="fb"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
	<li class="tw"><a href="#"><i class="fab fa-twitter"></i></a></li>
	<li class="yt"><a href="#"><i class="fab fa-youtube"></i></a></li>
	<li class="li"><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
	<li class="gp"><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
	<li class="sk"><a href="#"><i class="fab fa-skype"></i></a></li>
	<li class="gh"><a href="#"><i class="fab fa-github"></i></a></li>
</ul>
</div>
<div class="box bg-black cf">
<ul class="social-icon-list after-effect zoom out">
	<li class="fb"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
	<li class="tw"><a href="#"><i class="fab fa-twitter"></i></a></li>
	<li class="yt"><a href="#"><i class="fab fa-youtube"></i></a></li>
	<li class="li"><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
	<li class="gp"><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
	<li class="sk"><a href="#"><i class="fab fa-skype"></i></a></li>
	<li class="gh"><a href="#"><i class="fab fa-github"></i></a></li>
</ul>
<ul class="social-icon-list after-effect zoom in">
	<li class="fb"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
	<li class="tw"><a href="#"><i class="fab fa-twitter"></i></a></li>
	<li class="yt"><a href="#"><i class="fab fa-youtube"></i></a></li>
	<li class="li"><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
	<li class="gp"><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
	<li class="sk"><a href="#"><i class="fab fa-skype"></i></a></li>
	<li class="gh"><a href="#"><i class="fab fa-github"></i></a></li>
</ul>
<ul class="social-icon-list after-effect zoom rotate-out">
	<li class="fb"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
	<li class="tw"><a href="#"><i class="fab fa-twitter"></i></a></li>
	<li class="yt"><a href="#"><i class="fab fa-youtube"></i></a></li>
	<li class="li"><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
	<li class="gp"><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
	<li class="sk"><a href="#"><i class="fab fa-skype"></i></a></li>
	<li class="gh"><a href="#"><i class="fab fa-github"></i></a></li>
</ul>
<ul class="social-icon-list after-effect zoom rotate-in">
	<li class="fb"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
	<li class="tw"><a href="#"><i class="fab fa-twitter"></i></a></li>
	<li class="yt"><a href="#"><i class="fab fa-youtube"></i></a></li>
	<li class="li"><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
	<li class="gp"><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
	<li class="sk"><a href="#"><i class="fab fa-skype"></i></a></li>
	<li class="gh"><a href="#"><i class="fab fa-github"></i></a></li>
</ul>
</div>
<div class="box bg-gray cf">
<ul class="social-icon-list after-effect zoom out-in">
	<li class="fb"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
	<li class="tw"><a href="#"><i class="fab fa-twitter"></i></a></li>
	<li class="yt"><a href="#"><i class="fab fa-youtube"></i></a></li>
	<li class="li"><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
	<li class="gp"><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
	<li class="sk"><a href="#"><i class="fab fa-skype"></i></a></li>
	<li class="gh"><a href="#"><i class="fab fa-github"></i></a></li>
</ul>
<ul class="social-icon-list after-effect zoom in-out">
	<li class="fb"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
	<li class="tw"><a href="#"><i class="fab fa-twitter"></i></a></li>
	<li class="yt"><a href="#"><i class="fab fa-youtube"></i></a></li>
	<li class="li"><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
	<li class="gp"><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
	<li class="sk"><a href="#"><i class="fab fa-skype"></i></a></li>
	<li class="gh"><a href="#"><i class="fab fa-github"></i></a></li>
</ul>
<ul class="social-icon-list with-colors">
	<li class="fb"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
	<li class="tw"><a href="#"><i class="fab fa-twitter"></i></a></li>
	<li class="yt"><a href="#"><i class="fab fa-youtube"></i></a></li>
	<li class="li"><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
	<li class="gp"><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
	<li class="sk"><a href="#"><i class="fab fa-skype"></i></a></li>
	<li class="gh"><a href="#"><i class="fab fa-github"></i></a></li>
</ul>

CSS

:root {
	--primary-color: #368ae9;
	--brand-fb: #3b5998;
	--brand-tw: #1da1f2;
	--brand-yt: #ff0000;
	--brand-li: #0077b5;
	--brand-gp: #dd4b39;
	--brand-sk: #00aff0;
	--brand-gh: #333;
}
.social-icon-list {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}
.social-icon-list li {
	display: inline;
}
.social-icon-list li a {
	position: relative;
	display: inline-block;
	color: #fff;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	-webkit-transition: all .75s ease-out;
	   -moz-transition: all .75s ease-out;
		-ms-transition: all .75s ease-out;
		 -o-transition: all .75s ease-out;
			transition: all .75s ease-out;
}
.social-icon-list.with-colors li.fb a:hover {
	background: var(--brand-fb);
}
.social-icon-list.with-colors li.tw a:hover {
	background: var(--brand-tw);
}
.social-icon-list.with-colors li.yt a:hover {
	background: var(--brand-yt);
}
.social-icon-list.with-colors li.li a:hover {
	background: var(--brand-li);
}
.social-icon-list.with-colors li.gp a:hover {
	background: var(--brand-gp);
}
.social-icon-list.with-colors li.sk a:hover {
	background: var(--brand-sk);
}
.social-icon-list.with-colors li.gh a:hover {
	background: var(--brand-gh);
}
.social-icon-list.after-effect li a {
	z-index: 1;
}
.social-icon-list.after-effect li a:after {
	position: absolute;
	content: " ";
	z-index: -1;
	-webkit-transition: all .25s ease-out;
	   -moz-transition: all .25s ease-out;
		-ms-transition: all .25s ease-out;
		 -o-transition: all .25s ease-out;
			transition: all .25s ease-out;
}
.social-icon-list.after-effect li.fb a:after {
	background: var(--brand-fb);
}
.social-icon-list.after-effect li.tw a:after {
	background: var(--brand-tw);
}
.social-icon-list.after-effect li.yt a:after {
	background: var(--brand-yt);
}
.social-icon-list.after-effect li.li a:after {
	background: var(--brand-li);
}
.social-icon-list.after-effect li.gp a:after {
	background: var(--brand-gp);
}
.social-icon-list.after-effect li.sk a:after {
	background: var(--brand-sk);
}
.social-icon-list.after-effect li.gh a:after {
	background: var(--brand-gh);
}
.social-icon-list.shutter-left li a:after {
	top: 0;
	left: 0;
	height: 100%;
	width: 0;
}
.social-icon-list.shutter-left li a:hover:after {
	width: 100%;
}
.social-icon-list.shutter-right li a:after {
	top: 0;
	right: 0;
	height: 100%;
	width: 0;
}
.social-icon-list.shutter-right li a:hover:after {
	width: 100%;
}
.social-icon-list.shutter-top li a:after {
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
}
.social-icon-list.shutter-top li a:hover:after {
	height: 100%;
}
.social-icon-list.shutter-bottom li a:after {
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0;
}
.social-icon-list.shutter-bottom li a:hover:after {
	height: 100%;
}
.social-icon-list.shutter-left-right li a:after {
	top: 0;
	right: 0;
	height: 100%;
	width: 0;
}
.social-icon-list.shutter-left-right li a:hover:after {
	left: 0;
	right: auto;
	width: 100%;
}
.social-icon-list.shutter-right-left li a:after {
	top: 0;
	left: 0;
	height: 100%;
	width: 0;
}
.social-icon-list.shutter-right-left li a:hover:after {
	right: 0;
	left: auto;
	width: 100%;
}
.social-icon-list.shutter-top-bottom li a:after {
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0;
}
.social-icon-list.shutter-top-bottom li a:hover:after {
	height: 100%;
	top: 0;
	bottom: auto;
}
.social-icon-list.shutter-bottom-top li a:after {
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
}
.social-icon-list.shutter-bottom-top li a:hover:after {
	height: 100%;
	top: auto;
	bottom: 0;
}
.social-icon-list.zoom li a:after {
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	   -moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		 -o-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
	margin: 0 auto;
	opacity: 0;
}
.social-icon-list.zoom.out li a:after {
	width: 75%;
	height: 75%;
}
.social-icon-list.zoom.in li a:after {
	width: 125%;
	height: 125%;
}
.social-icon-list.zoom li a:hover:after {
	width: 100%;
	height: 100%;
	opacity: 1;
}
.social-icon-list.zoom.rotate-out li a:after {
	top: 0;
	left: 0;
	-webkit-transform: scale(.5) rotate(0deg);
	   -moz-transform: scale(.5) rotate(0deg);
		-ms-transform: scale(.5) rotate(0deg);
		 -o-transform: scale(.5) rotate(0deg);
			transform: scale(.5) rotate(0deg);
}
.social-icon-list.zoom.rotate-out li a:hover:after {
	-webkit-transform: scale(1) rotate(90deg);
	   -moz-transform: scale(1) rotate(90deg);
		-ms-transform: scale(1) rotate(90deg);
		 -o-transform: scale(1) rotate(90deg);
			transform: scale(1) rotate(90deg);
}
.social-icon-list.zoom.rotate-in li a:after {
	top: 0;
	left: 0;
	-webkit-transform: scale(1.5) rotate(0deg);
	   -moz-transform: scale(1.5) rotate(0deg);
		-ms-transform: scale(1.5) rotate(0deg);
		 -o-transform: scale(1.5) rotate(0deg);
			transform: scale(1.5) rotate(0deg);
}
.social-icon-list.zoom.rotate-in li a:hover:after {
	-webkit-transform: scale(1) rotate(90deg);
	   -moz-transform: scale(1) rotate(90deg);
		-ms-transform: scale(1) rotate(90deg);
		 -o-transform: scale(1) rotate(90deg);
			transform: scale(1) rotate(90deg);
}
.social-icon-list.zoom.out-in li a:after {
	top: 0;
	left: 0;
}
.social-icon-list.zoom.out-in li a:hover:after {
	-webkit-animation: zoomOutIn 1s ease;
	   -moz-animation: zoomOutIn 1s ease;
		-ms-animation: zoomOutIn 1s ease;
		 -o-animation: zoomOutIn 1s ease;
			animation: zoomOutIn 1s ease;
	animation-fill-mode: forwards;
}
@-webkit-keyframes zoomOutIn {
	0% {
		-webkit-transform: scale(.75);
		   -moz-transform: scale(.75);
			-ms-transform: scale(.75);
			 -o-transform: scale(.75);
				transform: scale(.75);
	}
	40% {
		-webkit-transform: scale(1.25);
		   -moz-transform: scale(1.25);
			-ms-transform: scale(1.25);
			 -o-transform: scale(1.25);
				transform: scale(1.25);
	}
	100% {
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
}
@keyframes zoomOutIn {
	0% {
		-webkit-transform: scale(.75);
		   -moz-transform: scale(.75);
			-ms-transform: scale(.75);
			 -o-transform: scale(.75);
				transform: scale(.75);
	}
	40% {
		-webkit-transform: scale(1.25);
		   -moz-transform: scale(1.25);
			-ms-transform: scale(1.25);
			 -o-transform: scale(1.25);
				transform: scale(1.25);
	}
	100% {
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
}
.social-icon-list.zoom.in-out li a:after {
	top: 0;
	left: 0;
}
.social-icon-list.zoom.in-out li a:hover:after {
	-webkit-animation: zoomInOut 1s ease;
	   -moz-animation: zoomInOut 1s ease;
		-ms-animation: zoomInOut 1s ease;
		 -o-animation: zoomInOut 1s ease;
			animation: zoomInOut 1s ease;
	animation-fill-mode: forwards;
}
@-webkit-keyframes zoomInOut {
	0% {
		-webkit-transform: scale(1.25);
		   -moz-transform: scale(1.25);
			-ms-transform: scale(1.25);
			 -o-transform: scale(1.25);
				transform: scale(1.25);
	}
	40% {
		-webkit-transform: scale(.75);
		   -moz-transform: scale(.75);
			-ms-transform: scale(.75);
			 -o-transform: scale(.75);
				transform: scale(.75);
	}
	100% {
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
}
@keyframes zoomInOut {
	0% {
		-webkit-transform: scale(1.25);
		   -moz-transform: scale(1.25);
			-ms-transform: scale(1.25);
			 -o-transform: scale(1.25);
				transform: scale(1.25);
	}
	40% {
		-webkit-transform: scale(.75);
		   -moz-transform: scale(.75);
			-ms-transform: scale(.75);
			 -o-transform: scale(.75);
				transform: scale(.75);
	}
	100% {
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
}