Membuat Tombol Slide Demo dan Download Keren

Membuat Tombol Slide Demo dan Download Keren

Banyak tombol demo dan download yang bersebaran di dunia online, sudah tau gitu kenapa admin masih posting tentang tombol live demo dan download? ini karena saya ingin share riquest dari salah satu members Opick Weblog yang menginginkan tombol live demo dan download keren.

Jika tertarik menggunakan tombol slide demo & download seperti di atas silahkan ikuti tutorialnya sampai selesai.

1. Sobat harus memasang Font Awesome Icons diblog sobat, namun jika sudah ada lewati 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 DEMO dan DOWNLOAD ---- http://wajahilmu.blogspot.com*/
#wrap{margin:20px auto;text-align:center}
#wrap br{display:none}
.btn-slide,.btn-slide2{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{border:2px solid #efa666}
.btn-slide:hover{background-color:#0099cc}
.btn-slide2:hover{background-color:#efa666}
.btn-slide:hover span.circle,.btn-slide2:hover span.circle2{left:100%;margin-left:-45px;background-color:#fdfdfd;color:#0099cc}
.btn-slide2:hover span.circle2{color:#efa666}
.btn-slide:hover span.title,.btn-slide2:hover span.title2{left:40px;opacity:0}
.btn-slide:hover span.title-hover,.btn-slide2:hover span.title-hover2{opacity:1;left:40px}
.btn-slide span.circle,.btn-slide2 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 span.circle2{background-color:#efa666}
.btn-slide span.title,.btn-slide span.title-hover,.btn-slide2 span.title2,.btn-slide2 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 span.title2,.btn-slide2 span.title-hover2{color:#efa666;left:80px}
.btn-slide span.title-hover,.btn-slide2 span.title-hover2{left:80px;opacity:0}
.btn-slide span.title-hover,.btn-slide2 span.title-hover2{color:#fff}

3. Klik Save

Untuk Cara Penggunaan

Cara penggunaannya sih sangatlah mudah, terlebih dahulu ubah Compose menjadi HTML pada post sobat. Setelah itu masukkan kode berikut di tempat yang sobat inginkan.

• Demo

<div id="wrap">
<a href="#" class="btn-slide" 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" 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>

Berikut Demo Tampilannya

Source : http://arlinadesign.blogspot.com/2014/12/memasang-slide-demo-dan-download-button.html

Bagikan Artikel ini