Social Media Icon Designs
Social media icon design and hover effects using CSS
Techmates 22 Mar, 2018 2039A 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);
}
}
Credits / Resources
- Font Awesome