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 ... Skip ke Kotak Komentar

25 Januari 2012 22.51

belum mengerti sob..
hhe

26 Januari 2012 10.58

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

26 Januari 2012 20.51

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

26 Januari 2012 21.02

makasih saranya sob .. :D

Tambahkan Komentar Anda

Peraturan :
1. Dilarang berkomentar dengan kata-kata yang kotor, Pornografi, SARA
2. Dilarang Poskan Spam
3. Dilarang poskan URL yang tidak perlu
Sekian Pemberitahuan Dari Saya
Hati-hati dengan Komentar Anda, anda Komentar Bukan Spam, Saya Pasti akan Follow anda, This Blog Dofollow

 
Yahoo Messenger
Send Me IM!
Google Plus
Add Me To Your Circle!
Twitter
Follow Me!
Facebook
Add My Facebook
Original Template By Belajar SEO Blogspot - Himajiesized By Dayz Hidayat - Converted By [./Forbiden-403]