 |
| social icon |
When I started Techsperia, I posted about expand on hover social icons. I'm proud to say that these are better than those! These social media icons are developed by me and contains neat icons of RSS, Facebook, Twitter and Google+. As usual, all this became possible because of the magical power of CSS!
Live Demo
Talk is cheap, show me the code!
<style>Make sure that you replace all the links highlighted in blue with your own social media links!
#social-hover {
float: right;
position: relative;
height: 40px;
}
#social-hover a{
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
width: 40px;
transition:width 0.4s;
-webkit-transition:width 0.4s;
-moz-transition:width 0.4s;
}
#social-hover a:hover{
width: 115px;
}
#social-hover ul, #top-menu ul { margin: 0; }
#social-hover li,
#social-hover li a,
#social-hover li .ts-icon,
#social-hover li .ts-text {
display: block;
position: relative;
width: 40px;
height: 40px;
}
#social-hover li,
#social-hover li a,
#social-hover li .ts-text {
float: left;
width: auto;
overflow: hidden;
}
#social-hover li a {
width: 40px;
line-height: 40px;
color: #FFF;
font-size: 12px;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}
#social-hover li.ts-rss a { background-color: #F88F16; }
#social-hover li.ts-rss .ts-icon { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9OY2Lm1aq3TXKAMTRb_Psop9URj3RO_sVPx7p295jSdTIR0olc1JGKCanf5gMfn6rBduYuNq2IYYSxxObGWRRRKw1jbdH1GijrNRRofGPTrb9fAwlGEYe16pk0Z9Wej9D-vskeZJZ_fM/s16/rss.png") no-repeat center center; }
#social-hover li .ts-icon { float: left; }
#social-hover li.ts-facebook a { background-color: #3B5998; }
#social-hover li.ts-facebook .ts-icon { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0nrTIr18x5ueSHhkrTC_fdvT_pB30y06iSl-PSGcO3StqevZ3sMizatG-HNUcUmFp7KfACFLDxEWMsXcAM4oLdZApjng2ZV700j753UCwxbVtJKMO_N6V1G_nIY-gvRSaI4Rr-qAzYa4/s16/facebook.png") no-repeat center center; }
#social-hover li.ts-twitter a { background-color: #3CF; }
#social-hover li.ts-twitter .ts-icon { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEbLAyWy6T_nld1Tc0W76_KylNviau9V6ObdILxGzC6Q2QjggCHwOt4v3s6G6hmfCumj58at-qGIZN6l0Ivlj2Qd-SFxajIf-3tya-HYh4t3VeHdv5TMVLH3O2x1h8PDO8EuFAf27KE1o/s16/twitter.png") no-repeat center center; }
#social-hover li.ts-gplus a { background-color: #BD3518; }
#social-hover li.ts-gplus .ts-icon { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLK5l29drdJc_M-GJ0vcOZS70fH14dgwdJWFebJlgrHldZt2pAyNc0UBdtoY1MIME2F33yyyv-ktK_tY86GzYH8r2uZZaorQWz123wN1hiAQZ239dRCvMU0vxqpE74FB_-xTRZcpKJT1s/s16/gplus.png") no-repeat center center; }
</style>
<div id="social-hover">
<ul>
<li class="ts-rss"><a href="http://feeds.feedburner.com/#" rel="nofollow" target="_blank"><div class="ts-icon"></div><div class="ts-text">RSS Feeds</div></a></li>
<li class="ts-facebook"><a href="https://www.facebook.com/#" rel="nofollow" target="_blank"><div class="ts-icon"></div><div class="ts-text">Facebook</div></a></li>
<li class="ts-twitter"><a href="https://twitter.com/#" rel="nofollow" target="_blank"><div class="ts-icon"></div><div class="ts-text">Twitter</div></a></li>
<li class="ts-gplus"><a href="https://plus.google.com/#/about" rel="nofollow" target="_blank"><div class="ts-icon"></div><div class="ts-text">Google+</div></a></li>
</ul>
</div>
0 comments:
Post a Comment