Cara Membuat Slide Demo dan Download Button [Tombol Slide Demo & Download]

Bagi para pemiliki blog download tentu tidak asing dengan adanya tombol download. Kecuali bagi mereka yang membuat link download hanya dalam wujud text. Tentu jika dibuatkan tombol download maka tidak akan membuat pengunjung bingung serta bisa menjadi pembeda untuk link-link lainnya agar tidak salah klik juga. Tentu tombol downloadnya harus keren dan menarik agar menarik perhatian pengunjung.

Selain menggunakan tombol download yang dibuat dengan CSS dan HTML ada juga pemilik blog download yang memakai gambar untuk pengganti tombol download. Dengan menguploud gambar dan memasukkan link download kedalam gambar maka sudah jadilah tombol download dalam bentuk gambar. Untuk kali ini saya akan berbagi tutorial cara membuat tombol download dan demo dengan fitur slide sebagai penghiasnya.

Tombol demo dan download ini dibuat dengan CSS dan HTML dengan tambahan font awesome. Bagi anda yang tidak memerlukan tombol demo kalian bisa mengubahnya dengan tombol download untuk alternatif link/server link download yang berbeda. Fitur slide ini akan muncul ketika kursor pengunjung menyentuk tombol downloadnya. Nah bagaimana tertarik untuk membuat tombol demo dan downloadnya? Ikuti saja langkah dibawah ini.

Cara Memasang Tombol Demo dan Download Di Blogger

Langkah 1

Bagi anda yang belum memasang js font awesome di blog silakan buka link berikut Cara Memasang Font Awesome Di Blog 

Langkah 2

Masuk ke blogger, pilih Tema → Edit HTML. Cari kode ]]></b:skin> atau </style>

Langkah 3

Salin kode dibawah ini dan pastekan/letakkan diatas kode ]]></b:skin> atau </style>

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

Terakhir simpan template.

Untuk memanggil tombol demo dan downloadnya silakan anda terapkan kode dibawah ini didalam postingan ketika anda ingin menggunakan tombol demo dan download. Pastikan mode penulisan postingannya adalah HTML buka Compose.

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

Nah cukup sekian tutorial cara membuat tombol demo dan download yang bisa saya bagikan. Jika mengalami kesulitan dan kendala silakan tanyakan dikolom komentar.