المواقع الاجتماعية
HTML
<div class="tbislso">
<ul>
<li><a class="tbisbox facebook" href="#"><p>15K+</p>Facebook </a></li>
<li><a class="tbisbox twitter" href="#"><p>10K+</p>Twitter</a></li>
<li><a class="tbisbox gplus" href="#"><p>5K+ </p>Google+</a></li>
<li><a class="tbisbox pinterest" href="#"><p>4K+ </p>Pinterest</a></li> <li><a class="tbisbox rss" href="#"><p>10K+</p>RSS</a></li>
</ul>
</div>
CSS
.tbisbox {font: 25px/24px normal 'Denk One', sans-serif; display: inline-block;position: relative;width: 95%;max-width: 280px;margin:0 auto 15px auto;padding: 16px;background-color: rgba(238, 238, 238, 0.1);box-shadow: 8px 8px 0 0px rgba(0, 0, 0, 0.1);-webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.tbislso {width: 95%;max-width: 280px;padding-top: 8px;padding-right: 8px;padding-left: 8px;}
.tbislso a {text-decoration: none !important;}
.tbislso ul {margin: 0;padding: 0;list-style: none;}
.tbislso ul li {display: inline;margin: 0;padding: 0;text-indent: 0;}
.tbislso ul li a.facebook {border-right: 65px solid rgba(59, 89, 152, 1); color: rgba(59, 89, 152, 1);-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}
.tbislso ul li a.facebook p {margin:2px -70px 0 20px; display: inline-block; color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}
.tbislso ul li a.facebook:hover {background: rgba(59, 89, 152, 1);border-right: 0px solid rgba(59, 89, 152, 0.1);color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}
.tbislso ul li a.facebook:hover p {opacity: 0;-webkit-transition: all 1ms ease-in-out;-moz-transition: all 1ms ease-in-out;-ms-transition: all 1ms ease-in-out;-o-transition: all 1ms ease-in-out;transition: all 1ms ease-in-out;}
.tbislso ul li a.twitter {border-right: 65px solid rgba(64, 153, 255, 1);color: rgba(64, 153, 255, 1);-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms...