Membuat Tombol Download Sederhana

Karena ada beberapa sobat Kompi Ajaib yang minta untuk menjelaskan cara menciptakan tombol download yang aku pakai, risikonya aku sharing juga sekarang. Saya sebut tombol download ini tombol sederhana, alasannya yaitu memang tombol ini dibuat dengan CSS yang sederhana dan menggunakan CSS Sprite untuk image backgroundnya sehingga tidak terlalu membebani blog.

Sebenarnya ini tidak hanya untuk tombol download saja, dapat Anda gunakan untuk tombol apa saja tinggal ganti gambar backgroundnya saja. Bisa tombol demo atau lainnya yang memerlukan sebuah tombol.

Gambar tombolnya dapat Anda buat sendiri dengan Photoshop atau Firework atau Anda cari tombol download yang sudah jadi di Google. Buat dua buah tombol dengan bentuk dan ukuran yang sama tapi beda warna, satu untuk tombol normalnya dan satunya lagi untuk tombol hovernya menyerupai yang sudah aku pakai ini.

Dan dua buah tombol tadi jadikan menjadi satu gambar menyerupai gambar di atas semoga dapat dipakai dengan CSS Sprite. Setelah Anda siap dengan gambar tombol Anda, silahkan copy instruksi CSS di bawah ini dan simpan di atas instruksi ]]></b:skin>

 .tombol{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1kuzKrBv-L0lVzuYTdOQO58ZZMMjVnYKoOofpiGEstfZ5AZmsNe3_8bQjCnwPSIxCxicEFse_yWg0NvmwBLHkfg8Lm7PWaVbc6eeYWCX7YWHquUjO85HxBI9vFDvZG7hDMRESeqjPdL9K/s1600/DownloadSprite2.png) no-repeat transparent;text-indent:-99999em!important;text-align:center;display:inline-block;height:50px;width:180px;background-position:0 0;transition:all .3s ease-in-out}
.tombol:hover{background-position:0 -57px} 

Untuk classnya dapat apa saja terserah Anda, di sini aku menggunakan kata "tombol" alasannya yaitu ini memang untuk tombol hehehe... Perhatikan url warna merah itu yaitu url gambar Anda. Dan untuk height (tinggi) diambil dari tinggi satu gambar sebelum digabungkan, juga lebarnya dari lebar gambar tombol Anda. Ingat untuk height (tinggi) harus dari tinggi satu gambar sebelum digabungkan semoga yang tampilnya hanya satu gambar saja.

Dan perhatikan untuk background position-nya (warna biru), pada posisi normal background position-nya 0 0 (x=0;y=0) semoga yang tampil gambar yang atasnya. Dan untuk hovernya, alasannya yaitu gambar di susun atas bawah maka yang dirubah angka y-nya. untuk gambar di atas y-nya aku kasih -57 (tinggi gambar ditambah margin di antara kedua gambar). Kaprikornus untuk posisi hover, background position-nya 0 -57px (x=0;y=-57px) semoga gambar yang bawahnya naik ke atas setinggi 57px saat dihover mouse. Kira-kira demikian lah... silahkan Anda berimajinasi sendiri sesuai dengan gambar yang Anda gunakan.

Untuk memanggilnya di dalam postingan cukup gunakan kode

 <div class="tombol"></div> 

Dan taruh pada link download Anda. Secara keseluruhannya akan menyerupai tampak di bawah ini

 <a href="http://www.kompiajaib..com/" target="_blank" title="Membuat Tombol Download Sederhana"><div class="tombol"></div></a> 

Karena tombol ini tidak menggunakan kata di tombolnya pada link downloadnya, maka saat ada orang yang copas dengan memblok postingan hingga dengan tombol downloadnya, maka link tidak akan tercopas. Silahkan coba saja blok tombol download yang ada di Kompi Ajaib kemudian copy dan paste pada postingan blog Anda, maka link downloadnya tidak akan ikut tercopas begitu juga tombolnya.

Bagaimana gampang dan sederhana kan tombol downloadnya? hehehe...silahkan kembangkan sesuai dengan impian dan imajinasi Anda.

Sumber https://www.kompiajaib.com/

Share this post