3D Button CSS3

http://media.smashingmagazine.com/wp-content/uploads/2011/02/new-css-techniques-103.jpg

Halo sobat Blogger ,,
sebelum saya tidur, saya mau posting 3D button ah .
langsung aja dah udah ngantuk Cekidot ..

1. Login ke Blogger Kalian Masing2
2. Rancangan --> Edit HTML
3. Cari Elemen code ]]></b:skin>
4. Masukan Code CSS3 Di bawah ini di atas Code b:skin tadi

.button3 {
cursor:pointer;
margin:10px 0px;
background:#0CA2F2;
padding:10px 15px;
margin:4px 2px;
font:bold 16px Arial,Sans-Serif;
color:#fff;
text-decoration:none;
outline:none;
text-shadow:0px -1px 0px #0474C2;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
inset 0px -1px 0px rgba(255,255,255,0.3),
0px 3px 0px #297EB9,
0px 5px 8px rgba(0,0,0,0.4)
;

-moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
inset 0px -1px 0px rgba(255,255,255,0.3),
0px 3px 0px #297EB9,
0px 5px 8px rgba(0,0,0,0.4)
;

box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
inset 0px -1px 0px rgba(255,255,255,0.3),
0px 3px 0px #297EB9,
0px 5px 8px rgba(0,0,0,0.4)
;

}


.button3:hover {
-webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4),
inset 0px -1px 0px rgba(255,255,255,0.3),
0px 3px 0px #0396FC,
0px 5px 8px rgba(0,0,0,0.4)
;

-moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4),
inset 0px -1px 0px rgba(255,255,255,0.3),
0px 3px 0px #0786DE,
0px 5px 8px rgba(0,0,0,0.4)
;

box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4),
inset 0px -1px 0px rgba(255,255,255,0.3),
0px 3px 0px #297EB9,
0px 5px 8px rgba(0,0,0,0.4)
;

}


.button3:active {
position:relative;
top:2px;
-webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
inset 0px -1px 0px rgba(255,255,255,0.3),
0px 1px 0px #297EB9,
0px 3px 3px rgba(0,0,0,0.4)
;

-moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
inset 0px -1px 0px rgba(255,255,255,0.3),
0px 1px 0px #297EB9,
0px 3px 3px rgba(0,0,0,0.4)
;

box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
inset 0px -1px 0px rgba(255,255,255,0.3),
0px 1px 0px #297EB9,
0px 3px 3px rgba(0,0,0,0.4)
;

}

5. Simpan Template.
6. Untuk mengaktifkanya, masukan Kode HTML di bawah Ini di mana aja Terserah kalian mau di posting di widget terserah kalian pokoknya

<a class='button3' href='#'>Pencetan 3 Dimensi Coy</a>


Demo :

Pencetan 3 Dimensi Gue Coy

5 komentar:

WAYAN GERDIAN mengatakan...

belum mengerti sob..
hhe

[./Forbiden-403] mengatakan...

Sobat tinggal Copy Paste Code CSS yang di atas masukan di Elemen ]]> ..
kalo mau aktivin tinggal Copy Code HTML trus Paste Di mana Aja ..

Friski Gatra mengatakan...

wah bagus sob tapi menurut saya tinggal tambah margin top atau heightnya kecilin di hovernya atau activenya biar kelihatan waktu klik ada pergeseran dikit btw nice info sob :D

[./Forbiden-403] mengatakan...

makasih saranya sob .. :D

Farhan Fauzan mengatakan...

sippp nih tutorial abang...tambah keren aja blog abang yg satu ini :)

Posting Komentar