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