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:








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
Previous
Next Post »

3 comments

Click here for comments
Rizal
admin
10 January 2015 at 19:44 ×

kok ga bisa to gan ??

Reply
avatar
Laguwa
admin
11 January 2015 at 09:10 ×

Kok ga bisa gan? Di JSFiddle juga bisa kok tuh

Reply
avatar

No Active Link, Relevan ConversionConversion EmoticonEmoticon

Beauty Ninja | Author : Rishad Harisdias