Cara Bikin Tombol Demo dan Download Keren di Blog

Draplan.com - Hallo semuanya ketemu lagi dengan saya Admin blog draplan yang pada kesempatan ini saya akan membagikan informasi menarik mengenai cara membuat tombol demo dan download keren di blog.

Tombol demo dan download merupakan tombol yang seringkali digunakan dalam suatu website atau blog. Penggunaan tombol tersebut tentu saja akan mempercantik tampilan serta membuat pengunjung lebih mudah memahami dimana dia harus mengklik tombol demo dan download.

Sebenarnya ada begitu banyak artikel mengenai pembuatan tombol demo dan download, begitu juga dengan desainnya terdapat berbagai macam desain, baik yang jelek, unik maupun cantik. Selain itu tombol demo juga ada yang memiliki efek pada tampilannya ketika diklik.

Dan kali ini tombol yang akan dibahas yaitu tombol yang dijamin keren dan unik yang tentu saja akan mempercantik tampilan blog anda. Silahkan sahabat draplan simak :

Cara Membuat Tombol Demo Dan Download Keren Di Blog

Pertama buka Blogger > pilih menu Tema > klik tombol Edit HTML > Tambahkan kode CSS dibawah ini sebelum kode ]]></b:skin> atau </style>

/* Tombol Demo */

.wrap {text-align: center;}

.btn{background:#23a6d5;color:#fff;border-radius:5px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.1);box-shadow:0 5px 10px rgba(0,0,0,0.1);-webkit-transition:-webkit-box-shadow .5s;transition:-webkit-box-shadow .5s;transition:box-shadow .5s;transition:box-shadow .5s,-webkit-box-shadow .5s;transition:box-shadow .5s,-webkit-box-shadow .5s;overflow:hidden;display:inline-block;position:relative;cursor:pointer;padding:10px 20px;margin:0 20px}.btn:hover{-webkit-box-shadow:0 10px 10px rgba(0,0,0,0.2);box-shadow:0 10px 10px rgba(0,0,0,0.2)}.btn:before{font-family:'FontAwesome';margin-right:10px;display:block;float:left}.btn.demo2:before{content:'\f06e'}.btn.download2:before{content:'\f019'}.btn.contact:before{content:'\f003'}.btn.demo:before{content:'\f06e'}.btn.download:before{content:'\f0ed'}.btn.contact:before{content:'\f003'}

Kemudian silahkan simpan template.

Untuk pemasangan / penerapan di artikel, tambahkan kode HTML dibawah ini di dalam postingan pada tab HTML.

Tombol 1

<a class="btn demo" href="#" rel="nofollow" style="color: white;" target="_blank">Demo</a> <a class="btn download" href="#" style="color: white;" target="_blank">Download</a></div>

Tombol 2

<a class="btn demo2" href="#" rel="nofollow" style="color: white;" target="_blank">Demo</a> <a class="btn download2" href="#" style="color: white;" target="_blank">Download</a> <a class="btn contact" href="#" style="color: white;" target="_blank">Contact</a> </div>

Silahkan ganti kode "#" dengan url yang diinginkan.

Untuk demonya bisa dilihat pada gambar di atas dalam postingan ini.

Nah itulah sahabat draplan ku sekalian, ulasan artikel tentang cara membuat tombol demo dan download keren, semoga ulasan yang saya bagikan diatas dapat terapkan pada blog anda dengan sukses.