Social Media Sharing Button

CSS Code

body {
font: 0.875em/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 42px 40px;
}

a {
text-decoration: none;
}

.share {
display: inline-block;
 margin-right: 20px;
}

.share_size_large {
width: 60px;
}

.share__count {
background-color: #fff;
border: solid 1px #a5b1bd;
border-radius: 3px;
/* add in vendor rules */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
/* add in vendor rules */
color: #424a4d;
float: left;
font-weight: bold;
margin-right: 10px;
padding: 4px 10px;
position: relative;
text-align: center;
}

.share_size_large > .share__count {
display: block;
float: none;
font-size: 18px;
margin-right: 0;
margin-bottom: 12px;
padding: 10px 0;
}

.share__count:before, .share__count:after {
content: '';
display: block;
height: 0;
top: 50%;
position: absolute;
right: -14px;
width: 0;
margin-top: -6px;
}

.share_size_large > .share__count:before, .share_size_large > .share__count:after {
content: '';
display: block;
height: 0;
left: 50%;
position: absolute;
top: auto;
 width: 0;
}

.share__count:before {
border: solid 7px transparent;
border-color: transparent transparent transparent #a5b1bd;
}

.share_size_large > .share__count:before {
border-color: #a5b1bd transparent transparent transparent;
bottom: -14px;
margin-left: -7px;
}

.share__count:after {
border: solid 6px transparent;
border-color: transparent transparent transparent #fff;
right: -12px;
margin-top: -5px;
}

.share_size_large > .share__count:after {
  margin-left: -6px;
  bottom: -12px;
  border-color: #fff transparent transparent transparent;
}

.share__btn {
border: solid 1px rgba(0, 0, 0, 0.2);
border-radius: 3px;
/* add in vendor rules */
box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.3), 0 1px 3px rgba(0, 0, 0, 0.15);
/* add in vendor rules */
color: #fff;
display: inline-block;
font-size: 13px;
font-weight: bold;
padding: 5px 10px;
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

.share_size_large > .share__btn {
padding: 5px 0;
width: 100%;
}

.share_type_twitter > .share__btn {
background-color: #4099FF;
}

.share_type_facebook > .share__btn {
background-color: #3B5999;
}

.share_type_gplus > .share__btn {
background-color: #F90101;
}

HTML Code

<div class="share share_size_large share_type_twitter">
<span class="share__count">868</span>
<a class="share__btn" href="#">Tweet</a>
</div>
<div class="share share_size_large share_type_facebook">
<span class="share__count">1.3K</span>
<a class="share__btn" href="#">Like</a>
</div>
<div class="share share_size_large share_type_gplus">
<span class="share__count">28</span>
<a class="share__btn" href="#">+1</a>
</div>
<br /><!-- spacer -->
<br /><!-- spacer -->
<div class="share share_type_twitter">
<span class="share__count">868</span>
<a class="share__btn" href="#">Tweet</a>
</div>
<div class="share share_type_facebook">
<span class="share__count">1.3K</span>
<a class="share__btn" href="#">Like</a>
</div>
<div class="share share_type_gplus">
<span class="share__count">28</span>
<a class="share__btn" href="#">+1</a>
</div>