Creative Social Media Links Design with CSS3
Social media is a viral means of marketing as well as communicating with your customers. Almost every website has its own social media links to help visitors share content and promote website in hence. Today I present you another creative social media links design with CSS3 hover effect. Just use some HTML and CSS code, and you will have a pretty cool social media widget too. Enjoy and share your thoughts in a comment.
Hover your mouse over the social media icon to see the effect.
Hover Effect1
CSS3 transition is not used.
Hover Effect2
CSS3 transition is used with ease function.
Hover Effect3
CSS3 transition is used with cubic-bezier function.
#h-social{text-align:left;padding:0;margin:0;list-style-type:none}
#h-social li{float:left;margin-right:2px;margin-bottom:2px;padding:0;display:inline;width:auto}
#h-social li a{display:block;float:left;height:100%;margin:0;padding:0;width:40px;height:40px;text-indent:-9999px}
#h-social li.twitter a{background:url(/wp-content/uploads/2013/12/hsocial-01/twitter.png) no-repeat 0 0}
#h-social li.twitter a:hover{background-color:#48c4d2}
#h-social li.googleplus a{background:url(/wp-content/uploads/2013/12/hsocial-01/googleplus.png) no-repeat 0 0}
#h-social li.googleplus a:hover{background-color:#d94a39}
#h-social li.facebook a{background:url(/wp-content/uploads/2013/12/hsocial-01/facebook.png) no-repeat 0 0}
#h-social li.facebook a:hover{background-color:#3b5998}
#h-social li.linkedin a{background:url(/wp-content/uploads/2013/12/hsocial-01/linkedin.png) no-repeat 0 0}
#h-social li.linkedin a:hover{background-color:#71b2d0}
#h-social li.youtube a{background:url(/wp-content/uploads/2013/12/hsocial-01/youtube.png) no-repeat 0 0}
#h-social li.youtube a:hover{background-color:#f45750}
#h-social li.delicious a{background:url(/wp-content/uploads/2013/12/hsocial-01/delicious.png) no-repeat 0 0}
#h-social li.delicious a:hover{background-color:#3274d1}
#h-social li.rss a{background:url(/wp-content/uploads/2013/12/hsocial-01/rss.png) no-repeat 0 0}
#h-social li.rss a:hover{background-color:#fe9900}
#h-social li.stumbleupon a{background:url(/wp-content/uploads/2013/12/hsocial-01/stumbleupon.png) no-repeat 0 0}
#h-social li.stumbleupon a:hover{background-color:#eb4924}
#h-social li a:hover{background-position:0 -40px}
#h-social.effect1 li a{
}
#h-social.effect2 li a{
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
#h-social.effect3 li a{
-webkit-transition: all 1s cubic-bezier(0.920, -0.600, 0.030, 1.650);
-moz-transition: all 1s cubic-bezier(0.920, -0.600, 0.030, 1.650);
-o-transition: all 1s cubic-bezier(0.920, -0.600, 0.030, 1.650);
transition: all 1s cubic-bezier(0.920, -0.600, 0.030, 1.650); /* custom */
}