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

Cara pemasangan pun cukup mudah, Buka Postingan > Buka Mode HTML, lagu pasteka kode dibawah ini.

<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..
Tampilkan Komentar
Sembunyikan Komentar

0 Response to "Cara Membuat Tombol Download keren 2019"

Post a Comment

Harap Tidak Sepam & Meninggalkan Link Aktif

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel