Animated social media icons with transitions
Forked from Tiffany Tse's Pen Social Media Icons .
A Pen by James Sterling on CodePen.
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> | |
<section> | |
<ul class="social"> | |
<li><a class="ease-all facebook" href="#"><i class="fa fa-facebook"></i><span class="hide-text">Facebook</span></a></li> | |
<li><a class="ease-all twitter" href="#"><i class="fa fa-twitter"></i><span class="hide-text">Twitter</span></a></li> | |
<li><a class="ease-all youtube" href="#"><i class="fa fa-youtube"></i><span class="hide-text">YouTube</span></a></li> | |
</ul> | |
</section> |
* { | |
-moz-box-sizing: border-box; | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
section { | |
width: 200px; | |
margin: 0 auto; | |
} | |
.hide-text { | |
text-indent: 100%; | |
white-space: nowrap; | |
overflow: hidden; | |
display: block; | |
} | |
.ease-all { | |
-webkit-transition: all 400ms ease-in-out; | |
-moz-transition: all 400ms ease-in-out; | |
-o-transition: all 400ms ease-in-out; | |
-ms-transition: all 400ms ease-in-out; | |
transition: all 400ms ease-in-out; | |
} | |
/* Social Icons */ | |
.social { | |
height: 10rem; | |
list-style-type: none; | |
margin: 0; | |
padding: 0; | |
text-align: center; | |
} | |
.social li a { | |
display: inline-block; | |
float: left; | |
width: 40px; | |
height: 40px; | |
margin-right: 1rem; | |
text-align: center; | |
padding-top: 13px; | |
-webkit-border-radius:20px; | |
-moz-border-radius:20px; | |
-o-border-radius:20px; | |
-ms-border-radius:20px; | |
border-radius:20px; | |
color: #fff; | |
} | |
.facebook { | |
-webkit-box-shadow: inset 0 0 0 40px #3b5998; | |
-moz-box-shadow: inset 0 0 0 40px #3b5998; | |
-o-box-shadow: inset 0 0 0 40px #3b5998; | |
-ms-box-shadow: inset 0 0 0 40px #3b5998; | |
box-shadow: inset 0 0 0 40px #3b5998; | |
} | |
.facebook:hover { | |
-webkit-box-shadow: inset 0 0 0 3px #3b5998; | |
-moz-box-shadow: inset 0 0 0 3px #3b5998; | |
-o-box-shadow: inset 0 0 0 3px #3b5998; | |
-ms-box-shadow: inset 0 0 0 3px #3b5998; | |
box-shadow: inset 0 0 0 3px #3b5998; | |
color: #3b5998; | |
} | |
.twitter { | |
-webkit-box-shadow: inset 0 0 0 40px #00aced; | |
-moz-box-shadow: inset 0 0 0 40px #00aced; | |
-o-box-shadow: inset 0 0 0 40px #00aced; | |
-ms-box-shadow: inset 0 0 0 40px #00aced; | |
box-shadow: inset 0 0 0 40px #00aced; | |
} | |
.twitter:hover { | |
-webkit-box-shadow: inset 0 0 0 3px #00aced; | |
-moz-box-shadow: inset 0 0 0 3px #00aced; | |
-o-box-shadow: inset 0 0 0 3px #00aced; | |
-ms-box-shadow: inset 0 0 0 3px #00aced; | |
box-shadow: inset 0 0 0 3px #00aced; | |
color: #00aced; | |
} | |
.youtube { | |
-webkit-box-shadow: inset 0 0 0 40px #bb0000; | |
-moz-box-shadow: inset 0 0 0 40px #bb0000; | |
-o-box-shadow: inset 0 0 0 40px #bb0000; | |
-ms-box-shadow: inset 0 0 0 40px #bb0000; | |
box-shadow: inset 0 0 0 40px #bb0000; | |
} | |
.youtube:hover { | |
-webkit-box-shadow: inset 0 0 0 3px #bb0000; | |
-moz-box-shadow: inset 0 0 0 3px #bb0000; | |
-o-box-shadow: inset 0 0 0 3px #bb0000; | |
-ms-box-shadow: inset 0 0 0 3px #bb0000; | |
box-shadow: inset 0 0 0 3px #bb0000; | |
color: #bb0000; | |
} |