<br/>
<div align="center" class="socialbtns">
<ul>
<li><a href="#" class="fa fa-lg fa-facebook"></a></li>
<li><a href="#" class="fa fa-lg fa-twitter"></a></li>
<li><a href="#" class="fa fa-lg fa-google-plus"></a></li>
<li><a href="#" class="fa fa-lg fa-github"></a></li>
<li><a href="#" class="fa fa-lg fa-pinterest"></a></li>
<li><a href="#" class="fa fa-lg fa-linkedin"></a></li>
<li><a href="#" class="fa fa-lg fa-instagram"></a></li>
<li><a href="#" class="fa fa-lg fa-youtube"></a></li>
</ul>
</div>
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
a, a:hover {
color: #000;
text-decoration: none;
padding: 5px;
}
.socialbtnsbtnsbtns, .socialbtnsbtnsbtns ul, .socialbtnsbtnsbtns li {
margin: 0;
padding: 5px;
}
.socialbtnsbtnsbtns li {
list-style: none outside none;
display: inline-block;
}
.socialbtns li {
list-style: none outside none;
display: inline-block;
}
.socialbtns .fa {
color: #FFF;
text-shadow: 1px 1px 0px #000,
1px -1px 0px #000,
-1px 1px 0px #000,
-1px -1px 0px #000;
text-shadow: 1px 1px 0px #000,
1px -1px 0px #000,
-1px 1px 0px #000,
-1px -1px 0px #000;
text-shadow: 1px 1px 0px #000,
1px -1px 0px #000,
-1px 1px 0px #000,
-1px -1px 0px #000;
text-shadow: 1px 1px 0px #000,
1px -1px 0px #000,
-1px 1px 0px #000,
-1px -1px 0px #000;
transition: all ease-out 0.5s;
transition: all ease-out 0.5s;
transition: all ease-out 0.5s;
transition: all ease-out 0.5s;
}
.socialbtns .fa:hover {
color: #000;
text-shadow: 1px 1px 0px #fff,
1px -1px 0px #fff,
-1px 1px 0px #fff,
-1px -1px 0px #fff;
text-shadow: 1px 1px 0px #fff,
1px -1px 0px #fff,
-1px 1px 0px #fff,
-1px -1px 0px #fff;
text-shadow: 1px 1px 0px #fff,
1px -1px 0px #fff,
-1px 1px 0px #fff,
-1px -1px 0px #fff;
text-shadow: 1px 1px 0px #fff,
1px -1px 0px #fff,
-1px 1px 0px #fff,
-1px -1px 0px #fff;
transition: all ease 0.5s;
transition: all ease-in 0.5s;
transition: all ease-in 0.5s;
transition: all ease-in 0.5s;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.