Cara Membuat Download Button Ala Beauty Ninja Versi 2 ~ Beauty Ninja

Kembali lagi di Beauty Ninja dengan artikel yang hampir sama yaitu download button. Tetapi versi barunya gan :)
Screenshot:

Demo JSFiddle : http://jsfiddle.net/rishadharis/L9702pt8/

Langsung saja ya..

Taruh kode dibawah ini di atas ]]></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: 150px;
line-height: 150px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 150px;
position: relative;
border-radius:100px;
z-index: 5;
transition:all .5s ease;
}
.kanan {
background: #eee;
color: #333;
display: block;
font-size: 13px;
border-radius: 0 10px 10px 0;
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;
transform: translate(0px,-100px);
width:10px;
opacity:0;
}
.kiri {
background: #333;
color: #eee;
display: block;
font-size: 13px;
border-radius: 10px 0 0 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:-150px;
transform:rotate(20deg);
width:10px;
opacity:0;
}
.bawah {
background: #21bbb8;
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;
}
.bnbutton a:hover {
box-shadow:0 0 15px;
transform:rotate(360deg);
}
.bnbutton:hover .kiri {
transform: translate(-150px,0);
transition: all .50s ease;
width:200px;
opacity:1;
}
.bnbutton:hover .kanan {
transform: translate(100px,-100px);
transition: all .50s ease;
width:200px;
opacity:1;
}
.bnbutton:hover .bawah {
transform: translate(0,50px);
transition: all .20s ease;
}