Cara Buat Tombol Download Efek Animasi CSS3 Blogger
4/21/2018
Tambah Komentar
Menyertakan tombol download pada sebuah artikel/postingan merupakan salah satu cara agar mempermudah para pembaca maupun pengunjung blog untuk menemukan file download yang mereka cari-cari sehingga kepuasan akan mereka rasakan ketika berada didalam suatu halaman blog. Kebanyakan blog-blog yang ada menurut pengamatan saya memiliki tombol download yang biasa saja dan terkadang hanya menampilkan Link saja dengan berbagai macam alasan yaitu lebih menyukai tampilan tombol download yang sederhana.

Selain terdapat efek animasi, pada tombol download yang akan saya bagikan ini akan menampilkan ukuran file serta ekstensi file. Cara membuatnya cukuplah mudah, kalian tidak perlu susah payah belajar CSS3 karna dengan mengikuti tutorial singkat dibawah ini kalian akan mampu membuat tombol download CSS3 dengan animasi.
- Live Demo Tampilan Tombol Download > (DEMO)
Cara Membuat Tombol Download Dengan CSS3 :
- Masuk ke pengeditan TEMA blog kalian.
- Pastekan kode dibawah ini tepat di atas kode </body> atau <!--</body>--></body>
<style>
.abt-button {
margin: 50px auto;
width: 200px;
}
/* CSS3 Button */
.abt-button a {
background: -moz-linear-gradient(center top , #00B7EA 0%, #009EC3 100%) repeat scroll 0 0 transparent;
color: white;
display: block;
font: 17px/50px Helvetica,Verdana,sans-serif;
height: 50px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 200px;
position: relative;
z-index: 2;
/*TYPE*/
color: white;
font: 17px/50px Helvetica, Verdana, sans-serif;
text-decoration: none;
text-align: center;
text-transform: uppercase;
/*GRADIENT*/
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}
.abt-button a, .abt-button p {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
.abt-button p {
background: #222222;
color: #FFFFFF;
display: block;
font: 12px/45px Helvetica,Verdana,sans-serif;
height: 40px;
margin: -40px 0 0 10px;
position: absolute;
text-align: center;
transition: margin 0.5s ease 0s;
width: 180px;
z-index: 1;
/*TRANSITION*/
-webkit-transition: margin 0.5s ease;
-moz-transition: margin 0.5s ease;
-o-transition: margin 0.5s ease;
-ms-transition: margin 0.5s ease;
transition: margin 0.5s ease;
}
.abt-button:hover .up {
margin: -5px 0 0 10px !important;
}
.abt-button:hover .down {
line-height: 35px !important;
margin: -85px 0 0 10px !important;
}
.abt-button a:active {
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top, #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}
.abt-button:active .up {
margin: -20px 0 0 10px !important;
}
.abt-button:active .down {
margin: -70px 0 0 10px !important;
}
</style>
- Masukan kode berikut ini kedalam mode HTML postingan.
<div class="abt-button">Pada tulisan berwarna kuning di atas kalian bisa menyesuaikan :
<a href="#">Download</a>
<p class="up">click to begin</p>
<p class="down">1.2MB .zip</p>
</div>
- # = Kalian ganti dengan url file.
- 1.2MB = Ganti dengan ukuran file.
- zip = Ganti dengan ekstensi file.
Belum ada Komentar untuk "Cara Buat Tombol Download Efek Animasi CSS3 Blogger"
Posting Komentar