Tutorial Photoshop CSS Glassy Button | Copyright 2008 Web 2.0 www.dremi.info

Tutorial Photoshop, Forum Photoshop, Tutorial CSS, Tutorial PHP, HTML, Web Tips, dll ! dremi.info

Custom Search

Apr ‘08 16 CSS Glassy Button

2061 hits 2 comments 446 download print send

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:

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.

terakhir edit HTML code tombol lu.

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

446 download print send

Technorati Cosmos: other blogs commenting on this post

SOCIAL BOOKMARK :

Social Bookmarks

PERMALINK HERE :

http://www.dremi.info/tutorial/photoshop/css-glassy-button.html

SHARE TUTORIAL :

<style type="text/css">
<!--
.tagContent {
	font-family: "Courier New", Courier, monospace;
	font-size: 11px;
	font-style: normal;
	line-height: normal;
	color: #006600;
	text-decoration: none;
	background-color: #F7FFEA;
	padding: 4px;
	border: 1px solid #99CC00;
	width: 90%;
}

-->
</style>
<p>wedewww.. balik lagi dah.. hheehek..biar tampilan tombol form di web lu ga default, lu bisa pake <a href="http://www.dremi.info/tutorial/photoshop/web-20-layout-with-css-part-3.html" target="_blank">CSS</a> bwat bikin style na. pertama bikin tombol dlu di photoshop, kita perlu 2 tombol, tombol aktif dan overlay (aktif saat mouse disentuh)</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/CSS%20Glassy%20Button/css-glassy-button.png" width="94" height="45"></p>
<p>woke, bkin doku baru ukuran sesuaiin ma tombol yang lu pake</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/CSS%20Glassy%20Button/css_glassyb1.png" width="194" height="131" />  </p>
<p>gw pake shapping dengan radius 10 px.</p>
<p>kasi sdkit style gradasi, stroke, ama outer glow.</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/CSS%20Glassy%20Button/css_glassyb8.png" width="255" height="194" /></p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/CSS%20Glassy%20Button/css_glassyb10.png" width="241" height="202" /></p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/CSS%20Glassy%20Button/css_glassyb7.png" width="243" height="330" /></p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/CSS%20Glassy%20Button/css_glassyb2.png" width="118" height="59" /></p>
<p>woke, karena judulna glassy, gw kasiin efek glass di top header button na. salah satu cara na, make layer mask.</p>
<p>bikin satu shape lagi, tempat kan di atas layer sblumna. kali ini ukurana lebih kecil dari sebelumna</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/CSS%20Glassy%20Button/css_glassyb3.png" width="117" height="64" /> </p>
<p>klik pada ikon add layer mask <img src="http://i175.photobucket.com/albums/w126/hairulazami/CSS%20Glassy%20Button/mask.png" width="16" height="14" /></p>
<p>akan muncul tanda mask di sebelah layer na:</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/CSS%20Glassy%20Button/css_glassyb9b.png" width="207" height="144" /> </p>
<p>baru dah lu pencet tombol D (bwat nge-reset color palet na mnjadi hitam putih)</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/CSS%20Glassy%20Button/css_glassyb6a.png" width="62" height="54" /> </p>
<p>woke, lanjut ke tool gradasi, tarik dah gradasi na pada layer mask tadi. </p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/CSS%20Glassy%20Button/css_glassyb9.png" width="118" height="67" /> </p>
<p>jadi ke gini dah hasil glassy na:</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/CSS%20Glassy%20Button/css_glassyb4c.png" width="208" height="240" /> </p>
<p>hmm.... bikin juga satu objek baru lagi untuk button overlay na</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/CSS%20Glassy%20Button/css-glassy-button-over.png" width="94" height="45" /> </p>
<p>==============================</p>
<p>uhuiiii... naaah skarang kita bikin CSS code na...</p>
<p>pertama bwat doku HTML baru .... namana <strong>button.html</strong></p>
<p>antara tag BODY kasi code html bwat button na: </p>
<div class="tagContent"><input type="submit" name="Submit" value="Button" /></div>

<p>tag code diatas akan menampilkan tombol default pada browser. </p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/CSS%20Glassy%20Button/css_glassyb11.png" width="71" height="41"></p>
<p>kedua bikin fiel CSS na, nama na <strong>style-button.css</strong></p>
<p>kasi code CSS ke gini:</p>
<div class="tagContent">
  <p>#buttonGw { width:95px; height:45px; background:url(css-glassy-button.png); border:none; color:#FFFFFF; size:12px; font-weight:bold; cursor:hand; }</p>
  <p>#buttonGwOver { width:95px; height:45px; background:url(css-glassy-button-over.png); border:none; color:#000000; size:12px; font-weight:bold; cursor:hand; }</p>
</div>
<p>woke tinggal lu link kan style CSS na, kasi code HTML dibawah ini, antara tag head.</p>
<div class="tagContent"><link href="style-button.css" rel="stylesheet" type="text/css" /></div>
<p>terakhir edit HTML code tombol lu.</p>
<div class="tagContent"><input type="button" id="buttonGw" onMouseOver="this.id='buttonGwOver';" onMouseOut="this.id='buttonGw';" name="Submit" value="Button" /></div>
<p>tes dah, file button.html lu.. hehheeek bijimane...kikikkkkk moga sukses...cobain yak.. :D</p>
 <P>&nbsp;</P><P style='font-size:11px;'><strong>© Copyright 2008 <a href="http://www.dremi.info" target="_blank" title="tutorial Photoshop">www.dremi.info</a> </strong><BR>
Original Post: <a href='http://www.dremi.info/tutorial/photoshop/css-glassy-button.html' title='tutorial photoshop CSS Glassy Button'>CSS Glassy Button</a> Category: <a href='http://www.dremi.info/tutorial/photoshop/button.html' title='tutorial photoshop Button'>Button</a>
<BR><B>About the Author:</B> dr.emi is a free man to distribute anything that he was founded. As a Webmaster He was publishing <a href="http://www.dremi.info" target="_blank" title="tutorial Photoshop">www.dremi.info</a> to create one community that loves free idealism. Very specialy in Design Category. <I>Welcome to love it!</I></P>

Selama untuk keperluan non profit dan belajar gratis, dipersilahkan untuk dicopy, disebarluaskan, atow diperbanyak, tanpa merubah content tutorial dengan tetap memasang author link, sesuai source code HTML na. Ntu tandana lu mensupport All Free Idealism dan menghargai karya dr.emi. Copy TAG HTML diatas bwat dipasang di web / blog lu.