script bem legal de rede social

<div class='metro-social'>
<li><a class="fb" href="https://www.facebook.com/chreparos/" target="_blank" rel="nofollow"></a></li>
<li><a class="tw" href="https://twitter.com/chtech_info" target="_blank" rel="nofollow"></a></li>
<li><a class="gp" href="https://plus.google.com/u/0/107548673311526392044" target="_blank" rel="nofollow"></a></li>
<li><a class="pi" href="" target="_blank" rel="nofollow"></a></li>
<li><a class="in" href="" target="_blank" rel="nofollow"></a></li>
<li><a class="yt" href="https://www.youtube.com/channel/UCALBVZEU3V30kMGQJjmc56Q" target="_blank" rel="nofollow"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/blogspot/tzuhD" target="_blank" rel="nofollow"></a></li>
</div>

<style>
.metro-social{width:280px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggnQM921YYKMtxtcSkDLL6EKvNh93scJaFa0u7UpTk_KSaSRdin8TcD-mv3XQDaI6u57oYEYZ4Zij5poX2Ut9Ev7SGzjjgfsQWS84EnCO8rxtI_ylRlyaHOT1LO4GXXbULevQMouOxsug/s1600/fb%601.png) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTMzpKPFIDpjwUdo03KVHQhgV-wyIaUFX2iS9jMeZ8EHijiYlqkplbEyYlaU7CphCq2AavcjHcjIFsRBxee1SFMjboreGPkkGsdt2H_u0TNmpPXRdp7Q2suc2vqzCK79XkMGLYzUkwnhM/s1600/tw1.png) no-repeat center center #43b3e5;width:76px;height:70px}
.metro-social .gp{width:76px;height:69px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyb6cFA4GW7-Qt6jziKPDqmXweumt3vbZy0sBY-JOwDqYtdiJ8q5_qNxv44B1cbYq80ZSaNMJsagDw70AxdClHCAdIJlecTwDLCJFEOyMyVwxIk1W9bajTfpqoldbBrCh1rPacU4jIT3E/s1600/g+1.png) no-repeat center center #da4a38}
.metro-social .yt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS51WjFbj5D7aulya8WlbDcjoynKrc2XAtAreeEKiYE2iR_OoitT9zMWgIUsQ-8fOjec2vINxl9MIYp5mS-PpDJ12uTxakyxkPYROkCWRTyB_w22ZIS64QUIdHdfigPBLM1Rke20DUdnw/s1600/YT1.png) no-repeat center center #e64a41;width:218px;height:69px}
.metro-social .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwhUQd8qbBhc__4IXIzHZizqYXpeRjW1GISGweGE9TW0sPdDMahUci7PXYxfREvZKnEAHFMchrNUmvscZ4YS7QdVkGRr16iDW3thbga8i4xfrkaJ5fWzMoPXtNsu4OMhDZNDZ5RR_H4Mg/s1600/feed1.png) no-repeat center center #e9a01c;width:218px;height:69px}
.metro-social li:hover .fb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4jCjCCvEsmGSANQ7RfiLB4PBetO0hvKaU5Hzn8LQy-zpkDYEyhZ2vsQerfP9-TnHW8-fh5xpzQuYyBhujngnHOSK-mv388_ZKJnL9xb7SfG-m-RGyzWppsvlQVHFLu8q9RukB9UyVkcw/s1600/fb2.png) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbVfJaCEqt0OMPkTYAvoBe0UyPKhyXQJKlm0oj_DX9ngenfQAMxwM46hYFgtxPXhWfkVFuD7QKPGsmeApyu3vMKT2J2iqmZGRmqYjxt9ghfet8oQZdaX9Fzs6Lw86tyunVI4UFHUrQmqk/s1600/tw2.png) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiiAT6SPDzDJvcdg10Grte8vy1KkPnohPggTkfkObYFfckPOr-JZaH3uArbbgCi5KI8NxAJ2zSjnD64NlMYOIPI5in_1au95rPWsmS87LbJIJONbWsEkbvBhCb_qn4UrsWl6RbzcJhDAo/s1600/g+2.png) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTk6modSVQSeOvJh1DfzoCKhEz9PIDQK7-DsVXqBQfeUGNTjXDeExULWiKIe3qfonERNIuuwLqJa8b9cOF0l5Lqgig0UekjJjSIPRaRvRNGeMsIGdDrxpEt9O3mVlVZu3gH_zymvYsEsE/s1600/pi2.png) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig8UIQfZyvKFWgjOF0mZYscqiGMN3OyB-EyPGIyrPrTDhOT7HY2b1x2H49auhngHYsRKMbj_V6ToFL2rdKEIVzU98-BpRqQcAHZT3CWIbdtsOrrEms7HHxjSMQYkPbwPuRLzkEq7jlheQ/s1600/Lin2.png) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge6jFPRH00xZleKYUFgb3KqKpL4AIeYlAOrqy3V2tIoHL_yDuEO5nnivdAKPCRLI8yTWiQsctf-Q5dVRM0ZM2fcqQNxqiNW4DItEHF7vT24wRlnoLtsQMmHCUWEgMsVRXQ_caPZbOCeiE/s1600/yt2.png) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq52czRNfa1QJYcsy7n-U_iwHSeSx2642MGsEX4D70s3NLROhQuRPPf5ovXG8e8AJ9zmwp4D6SiW1T5nrQPHCIUZj2dgbxRBFWbBiamFTMCLr_NWUhpUv-RH90KXK94t5TRbm9eN1HzA0/s1600/feed2.png) no-repeat center center #e9a01c}
</style>

------------------------------------------------------------------------------------------ Pessoal acchei esse script tão legal que resolvi compartilhar e postar aqui e assim tambem não perco ele de vista caso queira usa-lo novamente. Veja como ficou em http://chtechinformatica.com.br/

observações:

HREFs:::::links

<div class='metro-social'>
<li><a class="fb" href="https://www.facebook.com/chreparos/" target="_blank" rel="nofollow"></a></li>
<li><a class="tw" href="https://twitter.com/chtech_info" target="_blank" rel="nofollow"></a></li>
<li><a class="gp" href="https://plus.google.com/u/0/107548673311526392044" target="_blank" rel="nofollow"></a></li>
<li><a class="pi" href="" target="_blank" rel="nofollow"></a></li>
<li><a class="in" href="" target="_blank" rel="nofollow"></a></li>
<li><a class="yt" href="https://www.youtube.com/channel/UCALBVZEU3V30kMGQJjmc56Q" target="_blank" rel="nofollow"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/blogspot/tzuhD" target="_blank" rel="nofollow"></a></li>
</div>

pxS::::::::::::::::::::pixels

<style>
.metro-social{width:280px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggnQM921YYKMtxtcSkDLL6EKvNh93scJaFa0u7UpTk_KSaSRdin8TcD-mv3XQDaI6u57oYEYZ4Zij5poX2Ut9Ev7SGzjjgfsQWS84EnCO8rxtI_ylRlyaHOT1LO4GXXbULevQMouOxsug/s1600/fb%601.png) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTMzpKPFIDpjwUdo03KVHQhgV-wyIaUFX2iS9jMeZ8EHijiYlqkplbEyYlaU7CphCq2AavcjHcjIFsRBxee1SFMjboreGPkkGsdt2H_u0TNmpPXRdp7Q2suc2vqzCK79XkMGLYzUkwnhM/s1600/tw1.png) no-repeat center center #43b3e5;width:76px;height:70px}
.metro-social .gp{width:76px;height:69px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyb6cFA4GW7-Qt6jziKPDqmXweumt3vbZy0sBY-JOwDqYtdiJ8q5_qNxv44B1cbYq80ZSaNMJsagDw70AxdClHCAdIJlecTwDLCJFEOyMyVwxIk1W9bajTfpqoldbBrCh1rPacU4jIT3E/s1600/g+1.png) no-repeat center center #da4a38}
.metro-social .yt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS51WjFbj5D7aulya8WlbDcjoynKrc2XAtAreeEKiYE2iR_OoitT9zMWgIUsQ-8fOjec2vINxl9MIYp5mS-PpDJ12uTxakyxkPYROkCWRTyB_w22ZIS64QUIdHdfigPBLM1Rke20DUdnw/s1600/YT1.png) no-repeat center center #e64a41;width:218px;height:69px}
.metro-social .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwhUQd8qbBhc__4IXIzHZizqYXpeRjW1GISGweGE9TW0sPdDMahUci7PXYxfREvZKnEAHFMchrNUmvscZ4YS7QdVkGRr16iDW3thbga8i4xfrkaJ5fWzMoPXtNsu4OMhDZNDZ5RR_H4Mg/s1600/feed1.png) no-repeat center center #e9a01c;width:218px;height:69px}
.metro-social li:hover .fb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4jCjCCvEsmGSANQ7RfiLB4PBetO0hvKaU5Hzn8LQy-zpkDYEyhZ2vsQerfP9-TnHW8-fh5xpzQuYyBhujngnHOSK-mv388_ZKJnL9xb7SfG-m-RGyzWppsvlQVHFLu8q9RukB9UyVkcw/s1600/fb2.png) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbVfJaCEqt0OMPkTYAvoBe0UyPKhyXQJKlm0oj_DX9ngenfQAMxwM46hYFgtxPXhWfkVFuD7QKPGsmeApyu3vMKT2J2iqmZGRmqYjxt9ghfet8oQZdaX9Fzs6Lw86tyunVI4UFHUrQmqk/s1600/tw2.png) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiiAT6SPDzDJvcdg10Grte8vy1KkPnohPggTkfkObYFfckPOr-JZaH3uArbbgCi5KI8NxAJ2zSjnD64NlMYOIPI5in_1au95rPWsmS87LbJIJONbWsEkbvBhCb_qn4UrsWl6RbzcJhDAo/s1600/g+2.png) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTk6modSVQSeOvJh1DfzoCKhEz9PIDQK7-DsVXqBQfeUGNTjXDeExULWiKIe3qfonERNIuuwLqJa8b9cOF0l5Lqgig0UekjJjSIPRaRvRNGeMsIGdDrxpEt9O3mVlVZu3gH_zymvYsEsE/s1600/pi2.png) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig8UIQfZyvKFWgjOF0mZYscqiGMN3OyB-EyPGIyrPrTDhOT7HY2b1x2H49auhngHYsRKMbj_V6ToFL2rdKEIVzU98-BpRqQcAHZT3CWIbdtsOrrEms7HHxjSMQYkPbwPuRLzkEq7jlheQ/s1600/Lin2.png) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge6jFPRH00xZleKYUFgb3KqKpL4AIeYlAOrqy3V2tIoHL_yDuEO5nnivdAKPCRLI8yTWiQsctf-Q5dVRM0ZM2fcqQNxqiNW4DItEHF7vT24wRlnoLtsQMmHCUWEgMsVRXQ_caPZbOCeiE/s1600/yt2.png) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq52czRNfa1QJYcsy7n-U_iwHSeSx2642MGsEX4D70s3NLROhQuRPPf5ovXG8e8AJ9zmwp4D6SiW1T5nrQPHCIUZj2dgbxRBFWbBiamFTMCLr_NWUhpUv-RH90KXK94t5TRbm9eN1HzA0/s1600/feed2.png) no-repeat center center #e9a01c}

</style>

>>>>> vc pode usar os outros px so to usando 5, mas tem um total de 7 >>>>.fb,.tw,.gp,.pi,.in,.yt,.fd