Membuat Slide Demo Download Responsive
Posted by 
Membuat tombol Slide Demo dan Download Responsive di Blogger - Tombol demo dan unduh CSS akan menggunakan efek hover css termasuk radius batas, bayangan kotak, gradien linier, indeks-z, dan transisi untuk mencapai efek unik dan sederhana saat mengarahkan kursor. Tombol Slide Demo dan Download dibuat dengan CSS dengan efek kursor mouse. Dua ikon diambil dari fontawesome. Jadi sebelum ke tutorial ini Anda harus menambahkan skrip fontawesome di blog Anda jika sudah ada tidak perlu menambahkan lagi. Sebelum memulai tutorial ini, harap ambil cadangan template Anda untuk keamanan.
Pertama masuk ke Dashboard Blogger > Tema > Edit HTML dan letakkan script Fontawesome di bawah ini sebelum tag </head>. Jika sudah terinstal Fontawesome skip lanjut ke code selanjutnya.
<script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" data-auto-replace-svg="nest">
</script>
#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; }
Pilih Simpan/Save Theme.
Untuk langkah selanjutnya pilih Postingan – Entri Baru – Html – Lalu masukan kode pemanggil di bawah ini.
<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>
Catatan: Untuk Tagar ( tanda pagar ) dalam kode di atas bisa kamu ubah dengan link download atau link lainnya.
Result:
