CSS Glassy Button

April 16th, 2008 by dr.emi

wedewww.. balik lagi dah.. hheehek..biar tampilan tombol form di web lu ga default, lu bisa pake CSS bwat bikin style na. pertama bikin tombol dlu di photoshop, kita perlu 2 tombol, tombol aktif dan overlay (aktif saat mouse disentuh)

wedewww.. balik lagi dah.. hheehek..biar tampilan tombol form di web lu ga default, lu bisa pake CSS bwat bikin style na. pertama bikin tombol dlu di photoshop, kita perlu 2 tombol, tombol aktif dan overlay (aktif saat mouse disentuh)

woke, bkin doku baru ukuran sesuaiin ma tombol yang lu pake

gw pake shapping dengan radius 10 px.

kasi sdkit style gradasi, stroke, ama outer glow.

woke, karena judulna glassy, gw kasiin efek glass di top header button na. salah satu cara na, make layer mask.

bikin satu shape lagi, tempat kan di atas layer sblumna. kali ini ukurana lebih kecil dari sebelumna

klik pada ikon add layer mask

akan muncul tanda mask di sebelah layer na:

baru dah lu pencet tombol D (bwat nge-reset color palet na mnjadi hitam putih)

woke, lanjut ke tool gradasi, tarik dah gradasi na pada layer mask tadi.

jadi ke gini dah hasil glassy na:

hmm…. bikin juga satu objek baru lagi untuk button overlay na

==============================

uhuiiii… naaah skarang kita bikin CSS code na…

pertama bwat doku HTML baru …. namana button.html

antara tag BODY kasi code html bwat button na:

<input type="submit" name="Submit" value="Button" />

tag code diatas akan menampilkan tombol default pada browser.

kedua bikin fiel CSS na, nama na style-button.css

kasi code CSS ke gini:

#buttonGw { width:95px; height:45px; background:url(css-glassy-button.png); border:none; color:#FFFFFF; size:12px; font-weight:bold; cursor:hand; }

#buttonGwOver { width:95px; height:45px; background:url(css-glassy-button-over.png); border:none; color:#000000; size:12px; font-weight:bold; cursor:hand; }

woke tinggal lu link kan style CSS na, kasi code HTML dibawah ini, antara tag head.

<link href="style-button.css" rel="stylesheet" type="text/css" />

terakhir edit HTML code tombol lu.

<input type="button" id="buttonGw" onMouseOver="this.id=’buttonGwOver’;" onMouseOut="this.id=’buttonGw’;" name="Submit" value="Button" />

tes dah, file button.html lu.. hehheeek bijimane…kikikkkkk moga sukses…cobain yak.. :D

Tags: , , , , ,
Posted in Articles |

Translate

Download Unavailable Demo Unavailable
Bookmark Subscribe
Hello my fox! Glad to see you today!

If you love my tutorial, please chose any action from the left button.

2 Comments

tutorial photoshop Said:  

ni gw nyoba ngsi komen . katana pada ga bisa.. ni bisaaaa… :D wekkkss :P

hilzone Said:  

gokil abis ,,, caiyo2 ,,,

Hi.. ! Wanna say anything about my tutorial ?
Just say it with fill the comment form.
 
 
 
 
 
Category
stack