Make Share Links for Twitter, Facebook and Google Plus

Keberadaan web jejaring tidak dapat dielakan dalam rangka menyebarkan links, terutama link web-web favorit! Dengan adanya share links (berbagi link) kurang-lebihnya akan dapat mendongkrak popularitas sebuah weblog ;) Gue AA Koben mau berbagi tutorial membuat strong social buttons untuk 3 web jejaring terkenal, yaitu twitter, facebook dan google+ Kenapa hanya 3 macam? Karena tiga biji juga full stylish bro b-) :)) Langkah pertama yang mesti kalian lakukan adalah membuat gambar kecil dengan ukuran 40px x 20px Kalau sudah buat gambarnya, baru deh ke acara bumbu CSS & HTML.
ScreenshotGambar dengan tulisan Tweet this adalah efek hover yg dihasilkan! Ketika tidak di sorot, maka akan hanya terlihat Tweet this, Like this and Plus this :P

.share-circle {
width: 75px;
height: 75px;
position: relative;
border-radius: 50%;
border-width: 10px;
border-style: solid;
float: left;
}
.share-circle:not(:last-child) {
margin-right: 5px;
}
.share-circle span {
width: 75px;
height: 75px;
display: table-cell;
vertical-align: middle;
text-align: center;
line-height: 18px;
font-weight: 800;
font-size: 17px;
color: #FFF;
font-family: 'Open Sans', sans-serif;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
transition: line-height 300ms ease-out;
}
.share-circle:hover span {
line-height: 40px;
}
.share-circle a {
position: absolute;
display: block;
height: 23px;
top: 31px;
transition: opacity 300ms ease;
opacity: 0;
}
.share-circle:hover a {
opacity: 1;
}
.facebook {
border-color: #30497e;
background-color: #3B5998;
}
.facebook:hover {
background-color: #4164ac;
}
.facebook a {
left: 22%;
width: 40px;
background: url('FACEBOOK-IMAGE_40px x 20px') no-repeat top left;
}
.twitter {
border-color: #3d83d3;
background-color: #4099ff;
}
.twitter:hover {
background-color: #4fa0fe;
}
.twitter a {
left: 22%;
width: 40px;
background: url('TWITTER-IMAGE_40px x 20px') no-repeat top left;
}
.plus {
border-color: #ab1e23;
background-color: #C92228;
}
.plus:hover {
background-color: #d02f35;
}
.plus a {
left: 22%;
width: 40px;
background: url('GOOGLE-PLUS-IMAGE_40px x 20px') no-repeat top left;
}

<div class="share-circle twitter">
<span>Tweet<br/>this</span>
<a href="#" ></a>
</div>
<div class="share-circle facebook">
<span>Like<br/>this</span>
<a href="#" ></a>
</div>
<div class="share-circle plus">
<span>Plus<br/>this</span>
<a href="#" ></a>
</div>

Jadi deh, kalian tinggal sisipkan link tujuan pada syntax link yg sudah ada. Semoga berkenan :)
Resource by: cdpn.io/IizAn Bonus: cdpn.io/wpHBt
Happy coding \m/