Cara Membuat Download Button Ala Beauty Ninja Versi 2

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

Sekarang taruh kode dibawah ditempat yang sobat mau misalnya dipostingan.

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

Yo sekarang lihat hasilnya.. Keren bukan sob? Dijamin daah (y)

*Update Demo Langsung

Download DROPBOX 30MB

• Tweet
• Share
• Share
• Share
• Share

About Admin BeautyNinja

Namanya Rishad Harisdias. Seorang anak SMA yang mempunyai hobi Blogging. Dia tinggal di Cimahi, Jawabarat.

Related Post

• Mengubah Klik Kanan Di Blog Menjadi Berbeda (Kreasi Sendiri)Mengubah Klik Kanan Di Blog Menjadi Berbeda (Kreasi Sendiri) - Apa itu maksudnya? Coba sobat klik k
• Animasi Loading Pada Link Yang Di Hover Dengan CSS Animasi efek loading progress bar pada link yang di hover Apa itu animasi loading link? Yang say
• Cara Membuat Download Button Keren Ala Beauty Ninja Bounced Version Kembali lagi :D. Sebelumnya saya membuat artikel template. Sekarang Beauty Ninja share artikel
• Games 2048 Colour, Versi 2048 Yang Lebih Keren!Games 2048 Colour, versi 2048 yang lebih keren! - Wah udah lama ya ga buat posting, mungkin udah le