Cara membuat Tombol Download dan Demo Keren di blog

Banyak tombol Download dan Demo yang bersebaran di Internet, sudah tau gitu kenapa Mimin masih posting tentang tombol live Download dan Demo? ini karena Mimin ingin share request/permintaan dari salah satu anggota group Blogging yang menginginkan tombol Download dan Demo yang keren.

Jika tertarik menggunakan tombol slide Download dan Demo seperti di atas silahkan ikuti tutorialnya sampai selesai.

1. Sobat harus memasang Font Awesome Icons diblog sobat, namun jika sudah ada nih, lewati aja langkah ini. Untuk memasangnya silahkan copy kode berikut tepat sebelum atau di atas kode </head>

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

2. Copy CSS berikut di atas kode ]]></b:skin> atau </style>

/* CSS Button Download ---- https://dirukana.blogspot.com */
#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}

3. Klik Save

Untuk Cara Pemasangannya

Cara Pemasangan/Penggunaannya sih terbilang sangatlah mudah, terlebih dahulu ubah Compose menjadi HTML pada post sobat. Setelah itu masukkan kode berikut di tempat yang sobat 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>

Demo

Demo Click here Download Click here

Bagikan Artikel ini