Forked from Ben Fields's Pen Color Changing Social Bar.
Forked from Ben Fields's Pen Color Changing Social Bar.
A Pen by Derek Hartley on CodePen.
Created
September 28, 2015 01:37
-
-
Save DJHartley/1ce619173de7f7f4ebd1 to your computer and use it in GitHub Desktop.
Color Changing Social Bar
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
| <center> | |
| <br><br> | |
| <div id="social" class="miniWidth"> | |
| <ul> | |
| <li class="facebook" data-text="Like me on Facebook" data-network="facebook"><a href="#">Facebook</a></li> | |
| <li class="twitter" data-text="Tweet me on Twiiter" data-network="twitter"><a href="#">Twitter</a></li> | |
| <li class="google" data-text="Plus me on Google" data-network="google"><a href="#">Github</a></li> | |
| <li class="pinterest" data-text="Pin me on Pinterest" data-network="pinterest"><a href="#">Github</a></li> | |
| </ul> | |
| <p>Find me on the web</p> | |
| </div> | |
| </center> |
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
| $(function(){ | |
| /* Service hovers */ | |
| $("#social ul li").hover( | |
| function() { | |
| $("#social").addClass($(this).data("network")).addClass("active"); | |
| $("#social p").html($(this).data("text")); | |
| }, | |
| function() { | |
| $("#social").removeClass(); | |
| $("#social p").html("Find me on the web"); | |
| } | |
| ); | |
| }); |
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
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
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
| a{ | |
| text-decoration:none; | |
| } | |
| #social{ | |
| background-color:#e1e1e1; | |
| padding:05px; | |
| width:10 | |
| 0%; | |
| -webkit-transition: background .5s; | |
| -moz-transition: background .5s; | |
| -ms-transition: background .5s; | |
| -o-transition: background .5s; | |
| transition: background .5s; | |
| } | |
| #social ul{ | |
| text-align: center; | |
| padding-right: 3%; | |
| margin:40px auto; | |
| } | |
| #social p{ | |
| text-align:center; | |
| font-family:Arial; | |
| font-weight:bold; | |
| opacity:.4; | |
| padding:10px; | |
| } | |
| #social ul > li { | |
| display: inline-block; | |
| margin: 0 15px; | |
| background-image: url('http://codingdroid.com/wp-content/uploads/sprite2.png'); | |
| opacity: .4; | |
| -webkit-transition: opacity .4s; | |
| -moz-transition: opacity .4s; | |
| -ms-transition: opacity .4s; | |
| -o-transition: opacity .4s; | |
| transition: opacity .4s; | |
| } | |
| #social ul > li > a { | |
| display: block; | |
| text-indent: -9999px; | |
| width: 36px; | |
| height: 36px; | |
| } | |
| #social ul > li.facebook { background-position:0 0; } | |
| #social ul > li.twitter { background-position:0 -36px; } | |
| #social ul > li.google { background-position:0 -72px; } | |
| #social ul > li.pinterest { background-position:0 -108px; } | |
| #social ul > li.facebook:hover { background-position:-36px 0; } | |
| #social ul > li.twitter:hover { background-position:-36px -36px; } | |
| #social ul > li.google:hover { background-position:-36px -72px; } | |
| #social ul > li.pinterest:hover { background-position:-36px -108px; } | |
| .facebook.active{ | |
| background-color:#3B5998 !important; | |
| } | |
| .twitter.active{ | |
| background-color:#2094CA !important; | |
| } | |
| .google.active{ | |
| background-color:#d85b4b !important; | |
| } | |
| .pinterest.active{ | |
| background-color:#C92228 !important; | |
| } | |
| .active p{ | |
| opacity:.7 !important; | |
| color:white; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment