<body>
  <div class="element">
    <div class="group facebook-share">
      <div class="count facebook-count"></div>
      <i class="fa fa-caret-down"></i>
      <button class="fb"><i class="fa fa-facebook"></i> facebook</button>
    </div>
    <div class="group gplus-share">
      <div class="count gplus-count"></div>
      <i class="fa fa-caret-down"></i>
      <button class="gp"><i class="fa fa-google-plus"></i> google-plus</button>
    </div>
    <div class="group linkedin-share">
      <div class="count linkedin-count"></div>
      <i class="fa fa-caret-down"></i>
      <button class="linkedin"><i class="fa fa-linkedin"></i> linkedin</button>
    </div>
    <div class="group twitter-share">
      <div class="count twitter-count"></div>
      <i class="fa fa-caret-down"></i>
      <button class="twitter"><i class="fa fa-twitter"></i> twitter</button>
    </div>
    <div class="group pinterest-share">
      <div class="count pinterest-count"></div>
      <i class="fa fa-caret-down"></i>
      <button class="pinterest"><i class="fa fa-pinterest"></i> pinterest</button>
    </div>
  </div>
</body>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,100);

body{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  font-family: 'Roboto', sans-serif;
  overflow:auto;
  background: -webkit-linear-gradient(90deg, #232526 10%, #414345 90%); /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #232526 10%, #414345 90%); /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #232526 10%, #414345 90%); /* IE10 */
  background:      -o-linear-gradient(90deg, #232526 10%, #414345 90%); /* Opera 11.10+ */
  background:         linear-gradient(90deg, #232526 10%, #414345 90%); /* W3C */
}


.element{
  color: #fff;
  /* display: table; */
  /* margin: 100px auto; */
  position: absolute;
  left: 50%;
  margin-left: -400px;
  top: 50%;
  margin-top: -90px;
}

.element .group{
  display: inline-block;
  position: relative;
  cursor:pointer;
  margin: 0 5px;
}

.element button{
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 2px;
  cursor: inherit;
  border:0;
  color:#ffffff;
  width: 150px;
  outline: 0;
  font-family: inherit;
  -webkit-transition: background-color 0.2s ease-in-out;
  -moz-transition: background-color 0.2s ease-in-out;
  -o-transition: background-color 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out;
}

.fb{
  background-color: #306199;
}

.fb:hover{
  background-color: #244872;
}



.count{
  background-color: #fff;
  color: #565656;
  border-radius: 2px;
  margin-bottom: 10px;
  text-align: center;
  padding: 10px;
  height: 40px;
  box-sizing:border-box;
}

.fa-caret-down{
  position: absolute;
  margin-top: -22px;
  text-align: center;
  right: 10px;
  font-size: 28px;
}

.gp{
  background-color: #e93f2e;
}

.gp:hover{
  background-color: #ce2616;
}

.linkedin{
  background-color: #007bb6;
}

.linkedin:hover{
  background-color: #005983;
}

.twitter{
  background-color: #26c4f1;
}

.twitter:hover{
  background-color: #0eaad6;
}

.pinterest{
  background-color: #b81621;
}

.pinterest:hover{
  background-color: #8a1119;
}
$('.element').socialShare({
      url:'codepen.io',
      image:'https://download.unsplash.com/photo-1426200830301-372615e4ac54',
      twitterVia:'ritz078',
      twitterHashTags:'javascript,jquery'
    });

External CSS

  1. //cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://cdn.rawgit.com/ritz078/socialShare.js/master/src/jquery.socialshare.js