Make Animated Frames With 3D Effect Using CSS3

Bermain dengan trik efek hover memang selalu memberikan warna tersendiri. Salah satu master blog yang templatenya banyak memakai effect trick hover adalah kang Adhy Suryadi Pemilik web kompiajaib tampak jelas pada konten share this article terdapat trik-hover keren punya. Koben akan berbagi trik cara membuat frame animasi untuk tombol media sosial dengan efek 3D hanya menggunakan kode CSS3. Pertama-tama trick ini cocok bagi kalian yg memasang widget social media buttons dengan penampakan seperti berikutPerhatikan display 4 buah widget-social yg bentuknya selaras! Gambar twitter (kotak terang) itulah triknya yg akan dibahas sekarang :D Kenapa saya menyuruh kalian buat menyelaraskan tampilan widget-sosial terlebih dahulu, karena penggunaan gambar yg berfungsi sebagai tutup-buka nantinya harus sama pula [-X Bagi blogger sudah mahir silahkan kunjungi BASICuse bit.ly/1puQPG5

Perhatikan post pada sesi

Here is a HTML code for simple single frame:<div class="button-frame">
<!--Put your code of widget-social share button-->
<input id="unikID" type="checkbox">
<label for="unikID"><img src="widget-social.png" alt="" /></label>
</div>Image ini harus sama img src="widget-social.png" itu yg AA maksudkan ;)
Sekarang coba buka link demo brikut diikuti dengan memencet tombol Preview, and klik image pada kotak result sebelah kanan Live HTML Editor!

Itu versi original, sekarang Koben rubah sedikit kode dengan meniadakan gambar tutup-buka, dengan hanya menggunakan background-color alias warna latar saja ;) Untuk melihat demo, source code silahkan sobat buka link brkt sssttt...!

Happy coding \m/