Senin, 23 Januari 2012

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

4 komentar:

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

    BalasHapus
  2. 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

    BalasHapus