Hallo kali ini kenny akan memberikan tutorial membuat tombol download dan demo dengan efek animasi.
Tombol download dan demo ini bisa digunakan untuk blog berniche download, baik download game apk, tool, software, anime, film, dan sebagainya.
Lihat Juga : Membuat Menu Hover Responsive Dengan Bootraps
Tampilan tombol download memiliki efek animasi yang cukup menarik untuk anda terapkan pada blog download anda.
Berikut tutorialnya
Cara memasang tombol download dan demo pada blogger
1. Masuk Blogger > Tema > Edit HTML
2. Coari kode </head> dan pastekan kode dibawah ini tepat diatas tag </head>
<style>
/* Tombol Download */
.buttonDownload {border-radius: 3px;display: inline-block;position: relative;padding: 10px 25px;background-color: #000;color: white !important;font-weight: 500; font-size: 0.9em;text-align: center;text-indent: 15px;transition:all 0.4s;-moz-transition:all 0.4s;-webkit-transition:all 0.4s;
}
.buttonDownload:hover {opacity: .85;background-color: #00f;
}
.buttonDownload:before, .buttonDownload:after {content: ' ';display: block;position: absolute;left: 15px;top: 52%;
}
.buttonDownload:before {width: 10px;height: 2px;border-style: solid;border-width: 0 2px 2px;
}
.buttonDownload:after {width: 0;height: 0;margin-left: 3px;margin-top: -7px;border-style: solid;border-width: 4px 4px 0 4px;border-color: transparent;border-top-color: inherit;animation: downloadArrow 2s linear infinite;animation-play-state: paused;
}
.buttonDownload:hover:after {animation-play-state: running;
}
@keyframes downloadArrow {
0% {margin-top: -7px;opacity: 1;
}
0.001% {margin-top: -15px;opacity: 0;
}
50% {opacity: 1;
}
100% {margin-top: 0;opacity: 0;}
}
.buttondemo {border-radius: 3px;display: inline-block;position: relative;padding: 10px 42px;background-color: #000;color: white !important;font-weight: 500; font-size: 0.9em;text-align: center;transition:all 0.4s;-moz-transition:all 0.4s;-webkit-transition:all 0.4s;
}
.buttondemo:hover{background-color: #00f;}
.buttonDownload, .buttondemo a{text-decoration: none;}
</style>
3. Done dan Simpan.
Untuk menggunakan tombol download dan demo ini kalian hanya perlu menambahkan class seperti contoh dibawah
Lihat Juga : Menambahkan Author Profile Dibawah Postingan Blogger
Untuk Tombol Download
<a class="buttonDownload" href="URL Download">Download</a>
Untuk tombol download anda menambahkan class="buttonDownload"
Untuk Tombol Download
<a class="buttondemo" href="URL Demo/" target="_blank">DEMO</a>
Untuk tombol demo kalian tambahkan class="buttondemo"
Sekian tutorial membuat tombol download dan demo untuk blogger.
Demo