Cara Membuat Tombol Download keren 2019

Hai sahabat blogger semua ini adalah postingan pertama saya, jadi harap maklum dikarenakan saya tidak bisa berbicara panjang lebar seperti teman - teman hehehe..

Kali ini saya ingin berbagi sedikit Cara membuat Tombol Download Dan Demo Responsive tanpa panjang lebar langsung saja ketahap pemasangan nya saja.

Tahap Pemasangan Membuat Tombol Download Dan Demo Responsive 2019

1. Buka Blogger > Tema > Edit HTML
2. Pastikan di blog sahabat sudah terpasang css font awesome, seperti dibawah ini jika belum silahkan dipasang tepat diatas kode </head>

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

3. Kemudian copy dan paste CSS dibawah ini dan taruh dibawah code ]]></b:skin>

/* CSS Button Download Reading Design*/
#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}

4. Klik Simpan Tema

Tahap Pemasangan Tombol Download Dan Demo Responsive 2019

<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>

Demikian postingan tentang cara membuat tombol download dan demo responsive 2019, semoga bermanfaat terimakasih..