-->

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


Posted By : Unknown ~ http://forbiden-403.blogspot.com/

Artikel 3D Button CSS3 ini diposting oleh Unknown pada hari Senin, 23 Januari 2012. Terimakasih atas kunjungan Sobat serta kesediaan Sobat membaca artikel ini, Kritik dan saran dapat Sobat sampaikan melalui kotak komentar. Semoga Artikel 3D Button CSS3 Bermanfaat .. ^_^

Get This Widget



Artikel Terkait:

4 comments

25 Januari 2012 pukul 07.51

belum mengerti sob..
hhe

25 Januari 2012 pukul 19.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 pukul 05.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 pukul 06.02

makasih saranya sob .. :D

Posting Komentar

Sumber: http://kamu-klik.blogspot.com/2012/02/fitur-reply-keren-thread-comment.html#ixzz1nsPHRwSb
 

[./Followers]

Subscribe

[./This Blog]

Follow Us!

[./Friend Link's]

Return to top of page Copyright © 2010 | Platinum Theme Converted Blogger Template by[./Forbiden-403]