<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">

<div class="article-share-box on" style="top: 50%; left: 50%;">
  <input class="article-share-input" value="http://timnew.me//blog/2014/08/26/an-interesting-share-box-hover-effect/">
  
  <div class="article-share-links">
    <a href="https://twitter.com/intent/tweet?url=http%3A%2F%2Ftimnew.me%2F%2Fblog%2F2014%2F08%2F26%2Fan-interesting-share-box-hover-effect%2F" class="article-share-twitter" target="_blank" title="Twitter"></a>
    <a href="https://www.facebook.com/sharer.php?u=http%3A%2F%2Ftimnew.me%2F%2Fblog%2F2014%2F08%2F26%2Fan-interesting-share-box-hover-effect%2F" class="article-share-facebook" target="_blank" title="Facebook"></a>
    <a href="https://pinterest.com/pin/create/button/?url=http%3A%2F%2Ftimnew.me%2F%2Fblog%2F2014%2F08%2F26%2Fan-interesting-share-box-hover-effect%2F" class="article-share-pinterest" target="_blank" title="Pinterest"></a>
    <a href="https://plus.google.com/share?url=http%3A%2F%2Ftimnew.me%2F%2Fblog%2F2014%2F08%2F26%2Fan-interesting-share-box-hover-effect%2F" class="article-share-google" target="_blank" title="Google+"></a>
  </div>
</div>

.article-share-box {
  position: absolute;
  display: none;
  background: #fff;
  -webkit-box-shadow: 0 6px 20px 0 rgba(0,0,0,0.19), 0 8px 17px 0 rgba(0,0,0,0.2);
  box-shadow: 0 6px 20px 0 rgba(0,0,0,0.19), 0 8px 17px 0 rgba(0,0,0,0.2);
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin-left: -145px;
  overflow: hidden;
  z-index: 1;
}
.article-share-box.on {
  display: block;
}
.article-share-input {
  width: 100%;
  background: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 0 15px;
  color: #555;
  outline: none;
  border: 0;
  -webkit-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
  height: 36px;
  line-height: 36px;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26);
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26);
}
.article-share-links {
  background: #eee;
}
.article-share-links:before,
.article-share-links:after {
  content: "";
  display: table;
}
.article-share-links:after {
  clear: both;
}
.article-share-twitter,
.article-share-facebook,
.article-share-pinterest,
.article-share-google {
  width: 50px;
  height: 36px;
  display: block;
  float: left;
  position: relative;
  color: #999;
  text-shadow: 0 1px #fff;
  -webkit-transition: background 0.5s, text-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s 0.5s;
  -moz-transition: background 0.5s, text-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s 0.5s;
  -ms-transition: background 0.5s, text-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s 0.5s;
  transition: background 0.5s, text-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s 0.5s;
}
.article-share-twitter:before,
.article-share-facebook:before,
.article-share-pinterest:before,
.article-share-google:before {
  font-size: 20px;
  font-family: FontAwesome;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -10px;
  margin-left: -10px;
  text-align: center;
}
.article-share-twitter:hover,
.article-share-facebook:hover,
.article-share-pinterest:hover,
.article-share-google:hover {
  color: #fff;
  text-shadow: 0 4px 15px rgba(0,0,0,0.12), 0 6px 12px rgba(0,0,0,0.2);
  -webkit-transition: background 0.5s, text-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s, color 0.3s;
  -moz-transition: background 0.5s, text-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s, color 0.3s;
  -ms-transition: background 0.5s, text-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s, color 0.3s;
  transition: background 0.5s, text-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s, color 0.3s;
}
.article-share-twitter:before {
  content: "\f099";
}
.article-share-twitter:hover {
  background: #00aced;
}
.article-share-facebook:before {
  content: "\f09a";
}
.article-share-facebook:hover {
  background: #3b5998;
}
.article-share-pinterest:before {
  content: "\f0d2";
}
.article-share-pinterest:hover {
  background: #cb2027;
}
.article-share-google:before {
  content: "\f0d5";
}
.article-share-google:hover {
  background: #dd4b39;
}