Cara Membuat Tombol Demo dan Download Keren Di Blog

 Kali ini saya akan membahas bagaimana si cara membuat tombol Demo dan Download di Blog.Tombol demo dan download ini,tampilanya sangat menarik dan keren ada fitur slide show tombol ini cocok untuk blog kamu yang menyediakan berbagai template blogger atau blog download.Jika kamu tertarik dengan tombol Demo dan Download kamu bisa simak caranya di bawah ini

Cara Membuat Tombol Demo dan Download
1.Pertama masuk ke blogger 
2.klik tema atau template kemudian klik edit html
3.kemudian cari kode </head> caranya klik tulisan sembarang di dalam edit html kemudian tekan Ctrl dan f lalu tinggal ketikan apa yang kamu cari
4.Masukkan kode di bawah ini di atas kode </head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

5.Kalau sudah masukkan kode css di bawah ini di atas kode ]]></b:skin> atau </style>

/* CSS Button Download ---- https://www.nekoboi.xyz*/
#wrap{margin:20px auto;text-align:center}
#wrap br{display:none}
.btn-slide-diru,.btn-slide2-diru{position:relative;display:inline-block;height:50px;width:200px;line-height:50px;padding:0;border-radius:50px;background:#fdfdfd;border:2px solid #0099cc;margin:10px;transition:.5s}
.btn-slide2-diru{border:2px solid #efa666}
.btn-slide-diru:hover{background-color:#0099cc}
.btn-slide2-diru:hover{background-color:#efa666}
.btn-slide-diru:hover span.circle,.btn-slide2-diru:hover span.circle2{left:100%;margin-left:-45px;background-color:#fdfdfd;color:#0099cc}
.btn-slide2-diru:hover span.circle2{color:#efa666}
.btn-slide-diru:hover span.title,.btn-slide2-diru:hover span.title2{left:40px;opacity:0}
.btn-slide-diru:hover span.title-hover,.btn-slide2-diru:hover span.title-hover2{opacity:1;left:40px}
.btn-slide-diru span.circle,.btn-slide2-diru span.circle2{display:block;background-color:#0099cc;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-slide2-diru span.circle2{background-color:#efa666}
.btn-slide-diru span.title,.btn-slide-diru span.title-hover,.btn-slide2-diru span.title2,.btn-slide2-diru span.title-hover2{position:absolute;left:90px;text-align:center;margin:0 auto;font-size:16px;font-weight:bold;color:#30abd5;transition:.5s}
.btn-slide2-diru span.title2,.btn-slide2-diru span.title-hover2{color:#efa666;left:80px}
.btn-slide-diru span.title-hover,.btn-slide2-diru span.title-hover2{left:80px;opacity:0}
.btn-slide-diru span.title-hover,.btn-slide2-diru span.title-hover2{color:#fff}

6.Kalau sudah di copy semua code code di atas jangan lupa klik Save
7.Cara pemasangan atau penggunaan cukup mudah kamu pergi ke postingan lalu akan ada dua pilihan yaitu compose dan Html.Kemudian klik yang Html 
8.Setelah itu masukkan kode di bawah ini ke tempat yang kamu inginkan.

<div id="wrap">
<a href="#" class="btn-slide-diru" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">Demo</span>
  <span class="title-hover">Click here</span>
</a>
<a href="#" class="btn-slide2-diru" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">Download</span>
  <span class="title-hover2">Click here</span>
</a>
</div>

9.Maka hasilnya seperti di bawah ini