Pada saat membuat website atau blog, tombol download menjadi salah satu elemen penting yang sering digunakan. Tombol ini biasanya dipakai untuk mengunduh file seperti MP3, video, dokumen, template, aplikasi APK, dan berbagai file lainnya.
Sayangnya masih banyak pemula yang hanya menggunakan link biasa tanpa membuat tampilan tombol yang menarik. Akibatnya, pengunjung sulit membedakan mana link biasa dan mana tombol download.
Pada tutorial ini kamu akan belajar cara membuat download button asli menggunakan tag HTML button, bukan menggunakan textarea sebagai hasil akhirnya. Selain itu kita juga akan menambahkan ikon SVG panah bawah agar tampilannya lebih menarik.
Tutorial ini cocok untuk:
Semua langkah akan dijelaskan secara santai dan mudah dipahami.
Sebelum mulai membuat tombol download, ada beberapa hal yang perlu dipersiapkan terlebih dahulu.
Kamu bisa menggunakan XtGem, Blogger, atau website HTML biasa.
Download button adalah tombol khusus yang digunakan untuk membantu pengunjung mengunduh file tertentu.
Biasanya tombol download memiliki ciri-ciri seperti:
Penggunaan tombol download membuat website terlihat lebih profesional dibanding hanya menggunakan link biasa.
Banyak pemula membuat tombol download menggunakan textarea atau hanya link biasa. Padahal textarea sebenarnya hanya untuk menampilkan kode.
Jika ingin tombol yang benar-benar bisa diklik dan terlihat seperti tombol asli, maka harus menggunakan tag:
<button>
Tag button akan membuat tampilan lebih jelas dan mudah dipahami pengunjung.
SVG merupakan gambar berbasis vektor yang ringan dan tajam di semua ukuran layar.
SVG panah bawah sering digunakan sebagai ikon download karena tampilannya sederhana dan modern.
Kelebihan SVG:
Sebelum membuat tombol modern, kita perlu memahami struktur dasarnya terlebih dahulu.
Berikut contoh paling sederhana:
Hasil di atas sudah berupa button asli, bukan textarea.
Selanjutnya kita akan membuat tombol yang bisa menuju file download.
Sekarang tombol sudah bisa diklik.
Supaya tampilannya lebih keren, kita akan menambahkan ikon SVG panah bawah.
Kode SVG di atas akan membentuk ikon panah bawah sederhana.
Sekarang kita gabungkan SVG dengan button.
Hasil di atas sudah berupa tombol download sungguhan dengan ikon panah bawah.
Selanjutnya kita akan membuat tulisan tombol menjadi lebih menarik menggunakan warna.
Kamu bisa mengganti warna sesuai kebutuhan website.
Bagi pengguna XtGem, berikut langkah memasangnya.
Setelah disimpan, tombol akan langsung muncul di website.
Bagi pengguna Blogger caranya juga sangat mudah.
Tombol download akan tampil di dalam postingan.
Banyak pemula masih melakukan kesalahan saat membuat tombol download.
Pastikan semua tag HTML ditutup dengan benar.
Gunakan teks seperti:
SVG sederhana membuat website lebih cepat dibuka.
Hindari ukuran tombol terlalu kecil.
Pastikan file download masih tersedia.
Agar artikel mudah ditemukan Google, gunakan keyword secara natural seperti:
Jangan melakukan spam keyword berlebihan.
Textarea hanya cocok untuk menampilkan kode, bukan untuk tombol download asli.
Membuat tombol download button warna dan SVG panah bottom ternyata sangat mudah dipelajari. Dengan menggunakan tag HTML button, hasilnya akan terlihat seperti tombol asli dan lebih profesional dibanding textarea.
Pada tutorial ini kamu sudah belajar:
Semakin sering berlatih, kemampuan membuat tampilan website akan semakin berkembang. Kamu juga bisa mengembangkan tombol download ini menjadi lebih modern sesuai kebutuhan website.
Semoga tutorial cara membuat tombol download button bukan textarea model warna dan SVG panah bottom ini bermanfaat dan membantu kamu dalam belajar HTML dasar.