Cara Membuat Download Button Keren Ala Beauty Ninja Bounced Version ~ Beauty Ninja

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;
}