Cara Membuat Download Button Keren ala 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)
Oldest

5 comments

Click here for comments
movie Lovers
admin
22 December 2014 at 15:18 ×

Waduh mantaf gan Keren mau saya pasang di Blog saya yang Movie pasti keren tuh :3

Reply
avatar
tempe bacem
admin
22 December 2014 at 17:25 ×

Makasih gan.. tapi saya mau buat versi 2 siapa tau lebih keren gan :)

Reply
avatar
23 December 2014 at 12:49 ×

Keren juga nih tombol downloadnya, tapi ane gak sediakan posting download

Reply
avatar
tempe bacem
admin
23 December 2014 at 14:44 ×

Bookmark aja dulu gan :3 siapa tau butuh

Reply
avatar

No Active Link, Relevan ConversionConversion EmoticonEmoticon

Beauty Ninja | Author : Rishad Harisdias