In this code we have placed all the buttons inside a <p> tag that is a paragraph tag to give a tab effect to all the buttons.For sample effect just move your mouse into my site's social media buttons and you will see there.Now lets move into the coding part of this beautiful social media buttons.
CSS CODING:
This part comprises of the styling of the buttons and the paragraph <p> tag that occurs behind the buttons.
- <style type="text/css">
- #socic{
- background-color:#000000;
- border:4px solid black;
- border-radius:10px 10px 10px 10px;
- height:50;
- float:right;
- padding:10px;
- display:inline;
- position:relative;
- top:-17px;
} - img.sty2:hover{
- background-color:#ffffff;
- -moz-box-shadow:0px 0px 3px 5px #ffffff;
- -webkit-box-shadow:0px 3px 0px 5px #ffffff;
- box-shadow:0px 0px 3px 5px #ffffff;
- border-radius:6px 6px 6px 6px;
- -webkit-transition: all 1s ease;
- -o-transition: all 1s ease;
- -ms-transition: all 1s ease;
- transition: all 1s ease;
- }
- </style>
This part comprises of the image links and defining the class to it.You must upload your buttons initially to a photo hosting service and then obtain the links from there and use it in your code.Iam using Photobucket which was really great in photo hosting and you can also use my buttons URL in the below codes if you like them.
- <p id="socic">
- <b style="color:#ffffff;position:relative;bottom:20px">FOLLOW US</b>
- <a href="http://www.facebook.com/gadgetronicx" target="_blank"><img class="sty2" width="50" height="50" src="http://i1299.photobucket.com/albums/ag64/frankdonald3/facebook_zps0c3bfe4b.png" /></a>
- <a href="http://www.twitter.com/gadgetronicx" target="_blank">
<img class="sty2" width="50" height="50" src="http://i1299.photobucket.com/albums/ag64/frankdonald3/twitter_zps14e5dc30.png" />
</a> - <a href="http://gadgetronicx.blogspot.com/feeds/posts/default" target="_blank">
<img class="sty2" width="50" height="50" src="http://i1299.photobucket.com/albums/ag64/frankdonald3/rss_zpsd7a3c6aa.png" /></a> - <a href="https://plus.google.com/104085180662752064987" target="_blank">
<img class="sty2" width="50" height="50" src="http://i1299.photobucket.com/albums/ag64/frankdonald3/google_zps3e1a1b4a.png" /></a> - </p>
These buttons works great for me and increased my followers through social networks and iam sure that it will work for you too.Post in your comments and share your views about this post.
