Animated social media icons with transitions
Forked from Tiffany Tse's Pen Social Media Icons .
A Pen by James Sterling on CodePen.
Created
November 21, 2014 20:29
-
-
Save jamespsterling/2c5a40f45227107739a4 to your computer and use it in GitHub Desktop.
Social Media Icons
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| -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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment