0

Cara Membuat Button/Tombol Efek Animasi Bubble dengan Menggunakan CSS3

Senin, 11 Maret 2013
Share this Article on :
Pastinya sobat blogger sudah pernah melihat di blog lain ada dipasang button/tombol dengan animasi bubble atau seperti ada gelembung-gelembung balon didalam button/tombol tersebut. Button/tombol biasanya dibuat untuk meletakkan link download atau link lain tergantung kemauan si pengguna atau si pemasang tombol. Pada tips blogging ini saya mau berbagi mengenai cara membuat button/tombol dengan efek animasi bubble menggunakan CSS3. Namun sebelumnya silahkan dilihat dulu preview dari button animated bubble yang dibuat menggunakan CSS3 dibawah ini.





Demo BIGDemo MEDIUMDemo SMALL


Button/tombol yang dibuat terdiri dari 3 size atau ukuran yaitu besar, sedang dan kecil. Untuk kode button/tombolnya seperti yang saya tuliskan dibawah ini yang terbagi dalam 4 warna pilihan, sobat tinggal pilih ukuran dan warna yang sesuai yang diinginkan.
Kode button/tombol besar :
<a class="button big blue" href="LINK">LINKNAME</a>
<a class="button big green" href="LINK">LINKNAME</a>
<a class="button big orange" href="LINK">LINKNAME</a>
<a class="button big gray" href="LINK">LINKNAME</a>
Kode button/tombol sedang :
<a class="button blue medium" href="LINK">LINKNAME</a>
<a class="button green medium" href="LINK">LINKNAME</a>
<a class="button orange medium" href="LINK">LINKNAME</a>
<a class="button gray medium" href="LINK">LINKNAME</a>
Kode button/tombol kecil :
<a class="button small blue" href="LINK">LINKNAME</a>
<a class="button small green" href="LINK">LINKNAME</a>
<a class="button small orange" href="LINK">LINKNAME</a>
<a class="button small gray" href="LINK">LINKNAME</a>
Ganti tulisan Link dengan link referensi tujuan jika button/tombol animasi bubble tersebut diklik, kemudian ganti juga tulisan Link-Name dengan nama button atau tulisan yang akan terlihat didalam button. Untuk penempatan kodenya bisa ditempatkan didalam postingan atau kalo mau meletakkannya didalam template maka letakkan dimana saja atau diantara kode <body> dan kode </body>  pada template anda. Eeiiitt�sabar jangan di save dulu templatenya karena masih ada kode CSS yang harus sobat masukkan pada template agar button/tombol dengan efek animasi bubble tadi berfungsi dengan baik.



Copy kode CSS diatas  kemudian paste tepat diatas kode  ]]></b:skin>pada template anda. Nah sekarang barulah SAVE template anda dan coba lihat hasilnya. Dengan menggunakan button/tombol efek animasi bubble ini pastinya button yang dibuat jadi kelihatan keren dan menarik. Selamat mencoba


Artikel Terkait:

0 komentar:

Posting Komentar