<div id="button-count-share">
<div class="facebook button-share">
<i class="ikons"><i class="fa fa-facebook"></i><i class="icon-facebook icon-large"></i></i>

<br />
<div class="slide-share">
Share</div>
<a class="fb-share-button" href="http://www.yarbi.my.id/p/panduan-copywriting-1-apa-itu.html" name="fb_share" rel="nofollow" share_url="&quot;https://www.facebook.com/sharer.php?u=&quot; + data:blog.url" type="button_count">
</a>
</div>
<div class="facebook button-share">
<i class="ikons"><i class="fa fa-facebook"></i><i class="icon-facebook icon-large"></i></i>

<br />
<div class="slide-share">
Like</div>
<div class="fb-like" data-action="like" data-layout="button_count" data-share="false" data-show-faces="false">
</div>
</div>
<div class="google button-share">
<i class="ikons"><i class="fa fa-google-plus"></i><i class="icon-google-plus icon-large"></i></i>

<br />
<div class="slide-share">
G+</div>
<div class="g-plusone" data-count="true" data-size="medium" expr:data-href="data:post.url" rel="nofollow">
<script type="text/javascript">
  window.___gcfg = {lang: 'id'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script></div>
</div>
<div class="twitter button-share">
<i class="ikons"><i class="fa fa-twitter"></i><i class="icon-twitter icon-large"></i></i>

<br />
<div class="slide-share">
Tweet</div>
<a class="twitter-share-button" data-count="horizontal" data-related="" data-via="" expr:data-text="data:post.title" expr:data-url="data:post.url" href="https://twitter.com/share" title="Share via Twitter">Tweet</a>
<script async="async" src="https://platform.twitter.com/widgets.js" type="text/javascript">
</script></div>
</div>
<div class="clear">
</div>
#button-count-share { 
width:100%; 
overflow:hidden; 
background:transparent; 
margin:0 auto; 
padding:3px;
 }

#button-count-share span { 
float:left; 
position:relative; 
font-size:13px; 
color:#fff; 
margin:12px 5px 12px 5px;
}

.button-share { 
background:#dce0e0; 
position:relative; 
display:block; 
float:left; 
height:40px; 
overflow:hidden; 
width:140px; 
margin:4px; 
border-radius:3px;
 }

.ikons { 
display:block; 
float:left; 
position:relative; 
z-index:3; 
height:100%; 
vertical-align:top; 
width:38px; 
text-align:center; 
}

.ikons i { 
color:#fff; 
line-height:33px;
 }

.slide-share {
font-family:Open Sans;
font-weight:400;
border-left:1px solid rgba(255,255,255,0.35);
color:#fff;
font-size:16px;
line-height: 200%;
z-index:2;
display:block;
height:102%;
top:-1px;
left:38px;
position:absolute;
padding:5px 25px;
display:block; 
width:108px; 
margin:0; 
}

.slide-share p { 
font-family:Verdana; 
font-weight:400; 
border-left:1px 
solid rgba(255,255,255,0.35); 
color:#fff; 
font-size:14px; 
left:0; 
position:absolute; 
text-align:center;
 top:10px; 
width:100%; 
margin:0; 
}

.button-share .slide-share {
 transition:all 0.4s ease-in-out; 
}

.facebook .fb_iframe_widget { 
display:block; 
position:absolute; 
right:5px; 
top:0; 
z-index:1; 
}

.twitter iframe { 
left:50px; 
top:10px; 
z-index:1; 
display:block; 
position:absolute; 
}

.google #___plusone_0 { 
width:90px !important; 
top:10px; 
right:5px; 
position:absolute; 
display:block; 
z-index:1;
 }

.facebook .ikons,.facebook .slide-share { 
background:#4f79bc; 
}

.twitter .ikons,.twitter .slide-share { 
background:#63cef2; 
}

.google .ikons,.google .slide-share { 
background:#f36261;
 }

.facebook:hover .slide-share, .twitter:hover .slide-share,.google:hover .slide-share { left:180px; opacity:0.6; }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.