CSS ile Sosyal Mecralarda Paylaş Tasarımları Örnek 1

Bu makaleyi hazırlarken yaptığım bir projede css tasarımı sizlere aktarmaya çalışayım. Öncelikle, AddThis sitesinde yayınlanan paylaşım betiklerinin özelleştirilmiş hali olduğunu belirteyim.
CSS'e dökülen tasarımda ayrıca Font Awesome kullanılarak ikonlarla zenginleştirilmiştir.
CSS betiklerini hazırlayalım.
CSS

.kapsul{width:500px;margin:10px auto;box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15);background: #fff;}
.sosyal-mecralar-v2{list-style-type:none;margin:0px auto;display:block;width:465px;border-top:1px solid #EBEBEB;padding:10px;}
.sosyal-mecralar-v2:after{content:'';display:block;clear:both;}
.sosyal-mecralar-v2 li{margin-right:15px;width:145px;float:left;padding:0px;}
.sosyal-mecralar-v2 li:last-child{margin-right:0px;}
.sosyal-mecralar-v2 li u{font-size:12px;text-decoration:none;margin-left:4px;line-height:30px;float:left;display:block;}
.sosyal-mecralar-v2 li a{color:#fff;text-align:center;padding:4px 0px !important;}
.sosyal-mecralar-v2 li span{display:none !important;}
.sosyal-mecralar-v2 li.facebook{background:#3b5998;}
.sosyal-mecralar-v2 li .fa-facebook{background:#3b5998;}
.sosyal-mecralar-v2 li.twitter{background:#00aced;}
.sosyal-mecralar-v2 li .fa-twitter{background:#00aced;}
.sosyal-mecralar-v2 li.google-plus{background:#dd4b39;}
.sosyal-mecralar-v2 li .fa-google-plus{background:#dd4b39;}
.sosyal-mecralar-v2 li.comments{background:#FB8F3D;}
.sosyal-mecralar-v2 li .fa-comments{background:#FB8F3D;}
.sosyal-mecralar-v2 li i{color:#fff;float:left;display:block;width:24px;border-right:1px solid #fff;}
.sosyal-mecralar-v2 li i:before{font-size:16px;line-height:30px;}

HTML

<div class="kapsul">
    <script async type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
    <ul class="sosyal-mecralar-v2 addthis_default_style">
        <li class="facebook"><a class="addthis_button_facebook"><i class="fa fa-facebook"></i><u>Facebook'ta Paylaş</u></a></li>
        <li class="twitter"><a class="addthis_button_twitter"><i class="fa fa-twitter"></i><u>Twitter'da Paylaş</u></a></li>
        <li class="google-plus"><a class="addthis_button_google"><i class="fa fa-google-plus"></i><u>Google+'da Paylaş</u></a></li>
    </ul>
</div>

Örnekte, font ve css dosyaları mevcuttur. Bol sosyal paylaşımlı :) günlerde kullanmanız dileğiyle.