Cara Membuat Download Button Keren Ala Beauty Ninja Bounced Version


Kembali lagi :D. Sebelumnya saya membuat artikel template. Sekarang Beauty Ninja share artikel yang sama seperti biasanya yaitu download button ala Beauty Ninja.
Sobat bisa melihat Download Button versi pertama di sini dan versi dua di sini
Kali ini Beauty Ninja menghadirkan download button dengan animasi Bounce dengan @Keyframes.
Kali ini saya terinspirasi dari teman saya Syakirurahman yaitu dengan memberi efek bounce.

JSFiddle Demo

Real Demo :


Download 30MB


Tertarik? Langsung saja

Taruh kode dibawah keatas ]]></b:skin>

.bnbutton {
margin: 20px auto;
padding: 20px 0;
width: 200px;
}
.bnbutton a {
background: #31ace8;
color: #eee;
display: block;
font-size: 17px;
font-weight: 700;
font-family: 'Arial',Verdana,sans-serif;
height: 50px;
line-height: 50px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 200px;
position: relative;
z-index: 5;
transition:all .5s ease;
}
.kiri {
background: #333;
color: #eee;
display: block;
font-size: 13px;
border-radius: 0 0 10px 10px;
font-weight: 700;
transition: all .20s ease;
text-align: center;
font-family: 'Arial',Verdana,sans-serif;
height: 50px;
line-height: 50px;
text-decoration: none;
text-transform: uppercase;
width: 200px;
position: relative;
z-index: 2;
margin-top:-50px;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
0% {margin-top:-300%;opacity:0;}
50% {margin-top:-30px;opacity:1;}
75% {margin-top:-70px;opacity:1;}
100% {margin-top:-50px;opacity:1;}
}

/* Standard syntax */
@keyframes myfirst {
0% {margin-top:-300%;opacity:0;}
50% {margin-top:-30px;opacity:1;}
75% {margin-top:-70px;opacity:1;}
100% {margin-top:-50px;opacity:1;}
}
.bnbutton a:hover {
box-shadow: inset 200px 0px 0px #21bbb8;
transition:all .50s ease;
}
.bnbutton:hover .kiri {
transform: translate(0,50px);
transition: all .20s ease;
-webkit-animation: myfirst .8s; /* Chrome, Safari, Opera */
animation: myfirst .8s;
}

Lalu taruh kode ini dimanapun kamu inginkan.
<div class="bnbutton">
      <a href="#">Download</a>
      <span class='kiri'>30MB</span>
    </div>
Dan berakhirlah sudah tutorial kali ini. Semoga artikel saya ini dapat bermanfaat ^_^
Previous
Next Post »

10 comments

Click here for comments
tempe bacem
admin
24 December 2014 at 19:02 ×

Monggo :3 Tunggu versi 4nya yaah :D

Reply
avatar
tempe bacem
admin
24 December 2014 at 19:03 ×

Bentar lagi ada Versi 4 gan :D

Reply
avatar
13 January 2015 at 14:46 ×

Asiiik dah saya di mention.. Terima kasih Gan :D

Reply
avatar
6 March 2015 at 18:55 ×

Keren dah ane praktekin bos :D

Reply
avatar
N3 BloG
admin
6 June 2015 at 23:40 ×

Download Cheat Point Blank + Lost saga www.firefox.my.id

Reply
avatar
7 June 2015 at 19:47 ×

thanks gan.
sangat bermanfaat nih.
www.situsaya.com

Reply
avatar
25 June 2015 at 10:26 ×

Good gan bloggedewek.blogspot.com

Reply
avatar

No Active Link, Relevan ConversionConversion EmoticonEmoticon

Beauty Ninja | Author : Rishad Harisdias