Maintenance

Sorry .. This Blog Is Under Construction

Blog Tutorial - Free Templates - Free Software

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


Responses

4 Respones to "3D Button CSS3"

WAYAN GERDIAN mengatakan...

belum mengerti sob..
hhe


25 Januari 2012 pukul 07.51
[./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 ..


25 Januari 2012 pukul 19.58
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


26 Januari 2012 pukul 05.51
[./Forbiden-403] mengatakan...

makasih saranya sob .. :D


26 Januari 2012 pukul 06.02

Posting Komentar

 

Recent Comments

Popular Posts

Return to top of page Copyright © 2011 | [./Forbiden-403] | Share And Enjoy AboutMe | Best View Firefox 5 ++ or Firefox Aurora