Cara Mudah Membuat Demo & Download Button

loading...

Selamat datang di The Royal Moringa. Nah, kesempatan kali ini, saya akan membagi informasi yang cukup sederhana pada anda yaitu bagaimana cara membuat tombol demo dan download pada halaman posting blog anda. Pada umumnya, untuk mempermudah penggunaan keduanya, orang-orang biasanya akan menambahkan link url pada kata demo dan download yang telah disediakan di Blog. Tetapi kali ini, kita akan membuatnya dalam bentuk tombol. Untuk menambah nilai lebih pada postingan kali ini, saya menyediakan beberapa variasi tombol. Mari, kita ikuti langkah-langkah berikut.

1. Log in ke akun blog anda > Pada dashboard pilih Posts > New Post

  (keterangan: tombol demo dan download juga bisa diletakkan di Pages)

2.  Berikut adalah beberapa model tombol yang saya sediakan. Silakan anda pilih salah satu dan tambahkan kode HTML ini di menu HTML yang berada di sebelah kanan Compose

STYLE 1

                                  <a href="URL Demo"><input name="Demo" style="background-color: rgb(51 , 102 , 204); border-radius: 3px; border: 1px solid #3366cc; color: white; cursor:pointer; height: 28px; padding: 3px 16px;" type="button" value="Demo" /></a><a href="URL Download"><input name="Download" style="background-color: rgb(51 , 102 , 204); border-radius: 3px; border: 1px solid #3366cc; color: white; cursor:pointer; height: 28px; padding: 3px 16px;" type="button" value="Download" /></a>

     

Hasil                   :             

STYLE 2

                                   <a href="URL Demo"><button name="Demo" style="background-color: rgb(51 , 204 , 51)!important; border-radius: 3px; border: 1px solid #33cc33; color: white; cursor: pointer; height: 28px; padding: 3px 16px;"><i aria-hidden="true" class="fa fa-desktop"></i> Demo</button></a><a href="URL Download"><button name="Download" style="background-color: rgb(51 , 204 , 51)!important; border-radius: 3px; border: 1px solid #33cc33; color: white; cursor: pointer; height: 28px; padding: 3px 16px;"><i aria-hidden="true" class="fa fa-cloud-download"></i> Download</button></a>

Hasil                   :            

STYLE 3

                                   <a href="URL Demo"><button name="Demo" style="background-color: rgb(0 , 204 , 255)!important; border-radius: 16px; border: 1px solid #00ccff;color: white; cursor: pointer; height: 28px; padding: 3px 16px;"><i class="fa fa-play-circle" aria-hidden="true"></i> Demo</button></a><a href="URL Download"><button name="Download" style="background-color: rgb(0 , 204 , 255)!important; border-radius: 16px; border: 1px solid #00ccff; color: white; cursor: pointer; height: 28px; padding: 3px 16px;"><i class="fa fa-arrow-circle-o-down" aria-hidden="true"></i> Download</button></a> 

Hasil                    :            

STYLE 4
                                   <a href="URL Demo"><input name="DEMO" style="background-color: transparent; border: 2px solid #0099ff; color: #0099ff; cursor:pointer; height: 28px; padding: 3px 16px;" type="button" value="Demo" /></a><a href="URL Download"><input name="Download" style="background-color: transparent; border: 2px solid #99cc00; color: #99cc00; cursor:pointer; height: 28px; padding: 3px 16px;" type="button" value="DOWNLOAD" /></a> 

Hasil                    :             

Keterangan          :

• background-color adalah warna background tombol anda

• border-radius adalah lekukan pada keempat sudut tombol (semakin besar ukuran pixel maka semakin melengkung tombol tersebut)

• border adalah pinggiran dari tombol terdiri dari ukuran ketebalan dan warna color adalah warna teks

• cursor:pointer menandakan ketika tombol disorot maka akan muncul gambar tangan menunjuk, jika style ini dihilangkan maka akan kembali ke default yaitu tanda panah height adalah tinggi tombol

• padding adalah jarak teks ke sisi tombol. Penulisan padding ada 2 cara, yang pertama menulis ukuran sisi masing-masing ditulis (1px 2px 3px 4px). Urutan dari kiri ke kanan adalah padding atas, kanan, bawah, dan kiri. Cara kedua dilakukan jika padding atas & bawah, kiri & kanan bernilai sama ditulis (2px 8px). 2px adalah padding atas & bawah sedangkan 8px adalah padding kanan dan kiri

• type:button menunjukan fungsi sebagai tombol

• value adalah teks yang anda tulis di tombol

• <a href="URL DEMO/DOWNNLOAD"> diisikan dengan alamat demo/download yang dimaksud

Nah, dari keempat style yang saya sediakan, adakah yang anda tertarik? Jika ada, silakan anda buat sesuai kode yang saya tampilkan. Anda dibebaskan untuk mengganti warna dan icon dalam menggunakan tombol. Apakah style button ada yang lainnya? Pasti banyak. Salah satunya menjadikan gambar sebagai tombol. Bagaimana caranya? Gunakan kode HTML berikut.

                                    <a href="URL Demo/Download"><img src="http://urlgambaranda.jpg"/></a> 

Jika masih ada pertanyaan, boleh ditanyakan di kolom komentar. Terima kasih telah membaca!

loading...