Cara membuat tombol DEMO dan DOWNLOAD stylish di blogger

Tombol ini berguna buat halaman blog yang ingin mendemokan hasil tutorial. Tombol ini juga termasuk sederhana dan walaupun demikian ia tampak cantik atraktif karena ia juga memiliki efek animasi. 

Namun hanya di buat dengan material svg dan dengan CSS.

Tentu saja tombol ini telah kami modifikasi. 

OK, Langsung cara pemasangan:

1. Masuk ke pengaturan blogger
2. Pilih Tema
3. Pilih Edit HTMl

Letakan kode CSS berikut di atas kode </head>:

<style>#btn-cakep {margin: 10px auto;

text-align: center;}

#btn-cakep br {display: none;}

.btn-cakep1, .btn-cakep2, .btn-cakep3 {position: relative;display: inline-block;height: 50px;width: 200px;line-height: 50px;padding: 0;border-radius: 50px;background: #fff;border: 2px solid #FF00FF;margin: 10px;transition: .5s}

.btn-cakep2 {border: 2px solid #FF00FF;}

.btn-cakep3 {border: 2px solid #9900FF;}

.btn-cakep1:hover {background-color: #CC00FF;}

.btn-cakep2:hover {background-color: #3f51b5;}

.btn-cakep3:hover {background-color: #d83500;}

.btn-cakep1:hover span.circle, .btn-cakep2:hover span.circle2, .btn-cakep3:hover span.circle3 {left: 100%;margin-left: -45px;background-color: #fdfdfd;}

.btn-cakep1:hover span.circle{color: #009688;}

.btn-cakep2:hover span.circle2 {color: #3f51b5;}

.btn-cakep3:hover span.circle3 {color: #d83500;}

.btn-cakep1:hover span.title, .btn-cakep2:hover span.title2, .btn-cakep3:hover span.title3 {left: 40px;opacity: 0;}

.btn-cakep1:hover span.title-hover, .btn-cakep2:hover span.title-hover2, .btn-cakep3:hover span.title-hover3 {opacity: 1;left: 40px;}

.btn-cakep1 span.circle, .btn-cakep2 span.circle2, .btn-cakep3 span.circle3 {display: block;background-color: #009688;color: #fff;position: absolute;float: left;margin: 5px;line-height: 42px;height: 40px;width: 40px;top: 0;left: 0;transition: .5s;border-radius: 50%;}

.btn-cakep2 span.circle2 {background-color: #3f51b5;}

.btn-cakep3 span.circle3 {background-color: #d83500;}

.btn-cakep1 span.title,.btn-cakep1 span.title-hover, .btn-cakep2 span.title2,.btn-cakep2 span.title-hover2,.btn-cakep3 span.title3, .btn-cakep3 span.title-hover3 {position: absolute;left: 90px;text-align: center;margin: 0 auto;font-size: 16px;font-weight: bold;color: #009688;transition: .5s;}

.btn-cakep2 span.title2,.btn-cakep2 span.title-hover2 {color: #3f51b5;left: 80px;}

.btn-cakep3 span.title3,.btn-cakep3 span.title-hover3 {color: #d83500;left: 80px;}

.btn-cakep1 span.title-hover, .btn-cakep2 span.title-hover2, .btn-cakep3 span.title-hover3 {left: 80px;opacity: 0;}

.btn-cakep1 span.title-hover, .btn-cakep2 span.title-hover2, .btn-cakep3 span.title-hover3 {

color: #fff;

}

#isi{margin:10 10 12px;font-size:16px;}</style>

Save template.

Pemasangan kode HTML/XML berikut adalah pada saat kalian menuliskan postingan dengan konten DEMO jadi letakan kode berikut dan letakan di bawah gambar, konten atau apa saja yang
ingin di demokan. Meletakannya harus dalam opsi penulisan 'tampilan HTML', bukan 'tampilan Menulis', perhatikan gambar:

Tampilan menulis HTML ini memang beda dengan menulis normal (tampilan Menulis) selain harus cermat, HTML adalah mode penulisan koding yang tidak diperuntukan untuk orang awam. Karena kalian mau menampilkan tombol demo dan download, jadi abaikan dulu opsi 'tampilan Menulis', percayalah alah bisa karena biasa. Artinya kalian akan terbiasa...

Jadi berikut kodenya:

<div id="btn-cakep"><a class="btn-cakep2" href="Letakan Link atau URL Demo disini" target="_blank">
<span class="circle2"><svg style="height: 22px; width: 24px;" viewbox="0 0 24 16">
<path d="M23,11H18A1,1 0 0,0 17,12V21A1,1 0 0,0 18,22H23A1,1 0 0,0 24,21V12A1,1 0 0,0 23,11M23,20H18V13H23V20M20,2H2C0.89,2 0,2.89 0,4V16A2,2 0 0,0 2,18H9V20H7V22H15V20H13V18H15V16H2V4H20V9H22V4C22,2.89 21.1,2 20,2Z" fill="currentColor"></path></svg></span>
<span class="title2">DEMO</span>
<span class="title-hover2">Klik Sini</span>
</a>
<a class="btn-cakep3" href="Letakan Link atau URL konten disini" target="_blank">
<span class="circle3"><svg style="height: 22px; width: 24px;" viewbox="0 0 24 16">
<path d="M8 17V15H16V17H8M16 10L12 14L8 10H10.5V6H13.5V10H16M12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2M12 4C7.58 4 4 7.58 4 12C4 16.42 7.58 20 12 20C16.42 20 20 16.42 20 12C20 7.58 16.42 4 12 4Z" fill="currentColor">
</path></svg></span>
<span class="title3">UNDUH</span>
<span class="title-hover3">Klik sini</span>
</a>
</div>
<div class='isi'>

Perhatikan Tulisan warna merah silahkan diganti dengan link atau URL sesuai kebutuhan dan hajat kalian sendiri.

Jika sudah selesai SAVE. 

Lihat DEMO DISINI

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share: