Membuat Tombol Download Sederhana

Karena ada beberapa teman Kompi Ajaib yang minta untuk menjelaskan cara membuat tombol download yang saya pakai, akhirnya saya sharing juga sekarang. Saya sebut tombol download ini tombol sederhana, karena memang tombol ini dibentuk dengan CSS yang sederhana dan menggunakan CSS Sprite untuk image backgroundnya sehingga tidak terlalu membebani blog.

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

Gambar tombolnya bisa 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 seperti yang sudah saya pakai ini.

Dan dua buah tombol tadi jadikan menjadi satu gambar seperti gambar di atas agar bisa digunakan dengan CSS Sprite. Setelah Anda siap dengan gambar tombol Anda, silahkan copy kode CSS di bawah ini dan simpan di atas kode ]]></b:skin>

.tombol{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8TYt5SdH87VxgN4u42Ic6DTlpbA-dYMso14pOiGxKx6mfLg1EB5zQ_IP45MKEUd-KhWUiYp2G8LZ-rJdcM_83k9s-0SCoMhrjkkv34n35r84GZnDghup3jyuafazgRS9dSHXNRPSoZfz_/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 bisa apa saja terserah Anda, di sini saya memakai kata "tombol" karena ini memang untuk tombol hehehe... Perhatikan url warna merah itu adalah 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 agar 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) agar yang tampil gambar yang atasnya. Dan untuk hovernya, karena gambar di susun atas bawah maka yang dirubah angka y-nya. untuk gambar di atas y-nya saya kasih -57 (tinggi gambar ditambah margin di antara kedua gambar). Jadi untuk posisi hover, background position-nya 0 -57px (x=0;y=-57px) agar gambar yang bawahnya naik ke atas setinggi 57px ketika 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 seperti tampak di bawah ini

<a aria-label="Download" href="https://www.kompiajaib.com/" target="_blank" title="Download via Website"><div class="tombol"></div></a>

<a class="tombol" href="https://www.kompiajaib.com/" target="_blank" title="Download via Website">Download</a>

Karena tombol ini tidak menggunakan kata di tombolnya pada link downloadnya, maka ketika ada orang yang copas dengan memblok postingan sampai 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 mudah dan sederhana kan tombol downloadnya? hehehe...silahkan kembangkan sesuai dengan keinginan dan imajinasi Anda.