Cara Membuat Tombol Download dan Demo Keren

Cara Membuat Tombol Download dan Demo Keren

Diperbaharui 8 Mei 2020 11:02 AM

Buat yang mau pasang tombol download dan demo yang super keren seperti pada gambar di atas, kenapa harus menggunakan tombol demikian? Karena dengan menggunakan tombol seperti itu bisa lebih menarik perhatian para pembaca dengan tampilannya yang unik dan menonjol sehingga memudahkan dalam mengartikan bahwa pada bagian tersebut terdapat seuatu yang berbeda. Bagi  yang ingin memasang tombol tersebut langsung saja ikuti langkah-langkah dibawah ini.

Untuk tutorial ini bisa kamu gunakan di blogger ataupun native, karena pada dasarnya code yang disertakan adalah untuk mengedit tampilan dari tombol download dan demo.

Cara membuat tombol download dan demo :

  1. Masuk ke Blogger → Tema → Edit HTML
  2. Masukkan code berikut sebelum code </head>

Keterangan :

Code di atas adalah style dari tombol yang dibuat, dimana di dalam tombol tersebut terdapat icon dari fontawesome.

Gunakan code HTML berikut pada postingan untuk menampilkan tombol download dan demo keren

<div class="buttondemo"><a href="http://www.susantokun.com/"target="_blank">DEMO</a></div>
<div class="buttondownload"><a href="http://www.susantokun.com/"target="_blank">DOWNLOAD</a></div>

Keterangan :

Pada code html di atas terdapat class “buttondemo” dan “buttondownload” dimana class ini lah yang menjadi perbedaan sehingga tampilan dari buttonnya berubah. Tanpa class tersebut maka style tidak akan tampil.

Itulah artikel tentang Cara Membuat Tombol Download dan Demo Keren yang dapat saya sampaikan, semoga bermanfaat.

See the Pen Button Download and Demo by Susantokun (@Susantokun) on CodePen.

Baca Juga :

Cara Membuat Menu Navigasi Responsive Header Blog
Cara Memasang Widget Pengikut/Followers Blog Dengan HTML

susantokun avatar
susantokun
Lahir di Bumi ini atas perjuangan Ayah dan Ibu yang senantiasa membuat dan mengeluarkan sehingga lahirlah Susanto pada tanggal 27 Maret 1996 di Cianjur - Jawa Barat.
Kebijakan Berkomentar :
  • Dilarang berkomentar yang mengandung SPAM, SARA, HOAX, PORNO.
  • Mohon sertakan informasi detail saat terjadi error (pesan error, sreenshoot, code, logs, dsb.).
Silakan baca terlebih dahulu kebijakan berkomentar sebelum berkomentar.
KOMENTAR TERBARU