JSFiddle - React, Tailwind, and code Playground

by histutor

HTML

<script src="https://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script src="https://static.ak.fbcdn.net/connect.php/js/FB.Share"></script>
<script src="https://platform.twitter.com/widgets.js"></script>
<div id='button-share'>
	<div class='facebook share'>
		<div class='slide-share'>
		<p>Share</p>
		</div>
<div class='fb-share-button' data-layout='button_count' expr:data-href='data:post.url'/>
	</div>
	<div class='facebook share'>
		<div class='slide-share'>
		<p>Like</p>
		</div>
<div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false' expr:data-href='data:post.url'/>
	</div>
	<div class='google share'>
		<div class='slide-share'>
		<p>G+</p>
		</div>
<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url'/>
	</div>
	<div class='twitter share'>
		<div class='slide-share'>
		<p>Tweet</p>
		</div>
<a class='twitter-share-button' data-count='horizontal' data-related='histutor' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
	</div>
</div>

CSS

#button-share{width:100%;overflow:hidden;background:rgba (0,0,0,60);text-align:center;margin:15px auto;padding:0;padding:15px 0 10px}
#button-share span{position:relative;font-size:11px;color:#fff;margin:12px}
#button-share .share{background:#fcfcfc;position:relative;display:inline-block;float:none;height:40px;line-height:40px;overflow:hidden;width:140px;margin:0 auto;box-shadow:inset 0 0 5px rgba(0,0,0,0.1)}
#button-share .slide-share{z-index:2;display:inline-block;height:40px;line-height:40px;left:0;position:absolute;width:140px;margin:0 auto}
#button-share .slide-share p{text-transform:uppercase;font-family:&#39;Racing Sans One&#39;;font-weight:400;color:#fff;font-size:15px;left:0;position:absolute;text-align:center;width:100%;margin:0 auto}
#button-share .share .slide-share{transition:all 0.4s ease-in-out}
#button-share .facebook .fb_iframe_widget{display:block;position:absolute;right:15px;top:0;z-index:1}
#button-share .twitter iframe{right:10px;top:10px;z-index:1;display:block;position:absolute}
#button-share .google #___plusone_0{width:90px!important;top:10px;right:10px;position:absolute;display:block;z-index:1}
#button-share .facebook .slide-share,.twitter .slide-share,.google .slide-share{background:#2c3e50}
#button-share .facebook:hover .slide-share,#button-share .twitter:hover .slide-share,#button-share .google:hover .slide-share{left:140px;opacity:0.6}
#fb-container{position:relative;padding:0;margin:0}

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);
  })();