Memasang Download Button dan Slide Demo

Postingan kali ini adalah lanjutan dari pembahasan sebelumnya Membuat Tombol Demo dan Download Di Dalam Postingan Blog. Kali ini akan kita modifikasi agar lebih terlihat menarik dengan menambahkan sedikit Animasi dengan efek slide. Bagi sobat yang kemaren Request untuk Memasang Download Button dan Slide Demo ini akan kita bahas bersama.

Pemasangan Download Button dan Slide Demo pada blog ini sangat cocok untuk blog yang ber niche Download dan Tutorial karena pengunjung dapat segera mencobanya dan tentunya akan menarik untuk terus dikunjungi. Sebelum memulainya pastikan sobat sudah memasang fontawesome pada template blognya. 

Langsung saja bagi sobat yang mau mencoba Memasang Download Button dan Slide Demo, mari disimak langkah penerapannya dibawah ini.

Langkah Pertama 

Silahkan salin kode CSS dibawah ini lalu letakkan di atas kode </style> atau ]]></b:skin>.

#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;
}

Setelah itu silahkan Simpan Template.

Langkah Kedua
Untuk memanggil Download Button dan Slide Demo silahkan sobat letakkan kode dibawah ini di dalam postingan atau dimanapun ingin ditampilkan.

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

Langkah Ketiga
Agar tampilannya nanti rapih dan tidak terlihat berantakan silahkan atur pada tab Postingan "Tekan Enter Untuk Baris Baru" seperti dibawah ini.

Demo
Click here



Download
Click here

Dan Selesai, Selamat Mencoba semoga bermanfaat