Make Anchor Link with Image and CSS3 Effect

Kembali Koben mengangkat topik mengenai pemasangan link share/save di blog from blogger. Add share link menggunakan attribute CSS3 pernah disampaikan juga add stylish share links use CSS3. Bila diantara sobat ada yang doyan bermain dengan CSS snippet code, maka postingan berikut layak dibaca make social bookmark and share with sprite technique. Kepengen tombol berbagi yang simpel² saja ada juga kok makes simpel share button using CSS :D Kepengen cari lagi, silahkan diacak-acak saja isi kandungan blog aneh ini ;))
Kesempatan sekarang bagaimana cara membuat tombol/button untuk disisipkan link account yang kalian miliki. Mau facebook, twitter, friendster, feedburner, google+, or anything else.

Demo Button with Image for Link

Terlihat effect menghilang & memanjang! Sebenarnya mau diisi dengan anchor link apapun juga terserah kalian. Intinya kode CSS 3 tersebut adalah ramuan ajaibnya, supaya link dengan gambar itu bisa tampil gaya full stylish :">
Mari kita lanzutkan setelah yg mau lewat ini! Blogger ooohhh blogger, let's cekidot =))

Sobat buat terlebih dahulu image/gambar dengan resolusi 25 x 25 pixel.

CSS Coded

#sosial-ikon {
position: relative;
height: 25px;
width: 50px;
padding: 5px;
margin: 0px;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
#sosial-ikon:hover {
cursor: pointer;
width: 105px;
opacity: 1.0;
}
#sosial-ikon:hover a {
opacity: 0.3;
}
#sosial-ikon a {
position: absolute;
height: 25px;
width: 25px;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
#sosial-ikon a:hover {
opacity: 1.0 !important;
}
#sosial-ikon a:active {
position: absolute;
top: auto;
}
#sosial-ikon .gplus {
background: url("http://LINK-IMAGE-GPLUS-25x25.jpg") no-repeat;
left: 0;
}
#sosial-ikon .twitter {
background: url("http://LINK-IMAGE-TWITTER-25x25.jpg") no-repeat;
left: 25%;
}
#sosial-ikon .rss {
background: url("http://LINK-IMAGE-RSS-25x25.jpg") no-repeat;
left: 50%;
}

HTML Syntax

<div id="sosial-ikon">

<a href="https://plus.google.com/123456789012345678901/about" class="gplus"></a>
<a href="http://twitter.com/your-account-twitter" class="twitter"></a>
<a href="http://feeds.feedburner.com/your-account-feed" class="rss"></a>

</div>Penulisan html harus berurutan karena diatur oleh left: x%, left: xx%,...dan tentu selaras dengan unik ID.
Kalau kepengen make sharing buttons using jQuery plugin, silahkan baca resource teranyar makes sharing buttons use jQuery plugin, gaya punya :-bd
Semoga bermanfaat :)
Happy stylish link b-)