Membuat Animated Download Button Dengan CSS3 Untuk Blogger. Hari ini saya akan kongsikan cara membuat 'animated download button' dengan menggunakan CSS3. Download button ini agak unik dan mampu memberi kelainan kepada blog anda.
Demo
Langkah-langkah
1. Lojin akaun blogger anda
2. Pilih Template, seterusnya Edit Html (sebaiknya backup dulu template anda)
3. Cari kod di bawah dengan menekan CTRL+F
]]></b:skin>4. Copy dan Paste kod di bawah tepat di atas/sebelum ]]></b:skin>
<!-- animated download button start -->.abt-button { margin: 50px auto; width: 200px;}
/* Get this button at http://alimbiz.blogspot.com */
.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 */ /* Get this button at ahsancy.com */}.abt-button:active .up { margin: -20px 0 0 10px !important;}.abt-button:active .down { margin: -70px 0 0 10px !important;}<!-- animated download button stop -->
Cara Guna Dalam Posting Anda
Caranya cukup mudah. Copy dan Paste kan kod html di bawah di mana anda ingin tempatkan button ini,
<div class="abt-button">
<a href="Link Download">Download</a>
<p class="up">Klik Untuk Download</p>
<p class="down">1MB .rar</p>
</div>
- Gantikan Link Download dengan link download anda
- Klik Untuk Download dengan perkataan pilihan anda
- Saiz file anda
Selamat mencuba. Moga bermanfaat.
0 ulasan: