Cara Membuat Download Button Keren ala Beauty Ninja ~ Beauty Ninja

Beauty Ninja - Di posting kedua ini Beauty Ninja sengaja share artikel original buatan saya sendiri tidak seperti artikel sebelumnya yaitu Doraemon :v Itu cuma cari Pengunjung aja gan..
Dan sekarang saya akan share Download Button ala blog ini walaupun belum pernah dipakai tapi akan terus dipakai :3
Demo? Bisa dilihat dibawah ini

Download DROPBOX 30MB

Tertarik? Sebenernya simpel kodenya. HTMLnya saja singkat

HTML :

<div class="bnbutton">
<a href="#">Download</a>
<span class='kanan'>DROPBOX</span>
<span class='kiri'>30MB</span>
</div>

Singkat bukan sob? Hasilnya masih belum bergaya. Ya iyalah belum ditambah CSS.
Taruh kode dibawah ini keatas ]]></b:skin>

CSS :

.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;
}
.kanan {
background: #333;
color: #eee;
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(0,-50px);
}
.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:-100px;
}
.bnbutton a:hover {
box-shadow: inset 200px 0px 0px #21bbb8;
transition:all .50s ease;
}
.bnbutton:hover .kiri {
transform: translate(-200px,0);
transition: all .20s ease;
}
.bnbutton:hover .kanan {
transform: translate(200px,-50px);
transition: all .20s ease;
}

Sekarang lihat hasilnya sob?
Untuk versi JSFiddle-nya sobat bisa klik di http://jsfiddle.net/g2yem69y/3/
Bagaimana sob? Keren bukan..
Jadi jika sobat mau kasih download button di postingan tinggal beri kode HTML yang sudah saya beri diatas.

(Rishad Harisdias - Beauty Ninja)