{"id":58,"date":"2008-04-16T20:28:08","date_gmt":"2008-04-16T20:28:08","guid":{"rendered":"https:\/\/www.dremi.info\/?p=58"},"modified":"2008-04-16T20:28:08","modified_gmt":"2008-04-16T20:28:08","slug":"css-glassy-button","status":"publish","type":"post","link":"https:\/\/www.dremi.info\/articles\/css-glassy-button.html","title":{"rendered":"CSS Glassy Button"},"content":{"rendered":"<p>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) <!--more--> <\/p>\n<style type=\"text\/css\">\n<!--\n.tagContent {\n\tfont-family: \"Courier New\", Courier, monospace;\n\tfont-size: 11px;\n\tfont-style: normal;\n\tline-height: normal;\n\tcolor: #006600;\n\ttext-decoration: none;\n\tbackground-color: #F7FFEA;\n\tpadding: 4px;\n\tborder: 1px solid #99CC00;\n\twidth: 90%;\n}\n-->\n<\/style>\n<p>wedewww.. balik lagi dah.. hheehek..biar tampilan tombol form di web lu ga default, lu bisa pake <a href=\"https:\/\/www.dremi.info\/tutorial\/photoshop\/web-20-layout-with-css-part-3.html\" target=\"_blank\" rel=\"noopener\">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>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/CSS%20Glassy%20Button\/css-glassy-button.png\" width=\"94\" height=\"45\"><\/p>\n<p>woke, bkin doku baru ukuran sesuaiin ma tombol yang lu pake<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/CSS%20Glassy%20Button\/css_glassyb1.png\" width=\"194\" height=\"131\" \/>  <\/p>\n<p>gw pake shapping dengan radius 10 px.<\/p>\n<p>kasi sdkit style gradasi, stroke, ama outer glow.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/CSS%20Glassy%20Button\/css_glassyb8.png\" width=\"255\" height=\"194\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/CSS%20Glassy%20Button\/css_glassyb10.png\" width=\"241\" height=\"202\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/CSS%20Glassy%20Button\/css_glassyb7.png\" width=\"243\" height=\"330\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/CSS%20Glassy%20Button\/css_glassyb2.png\" width=\"118\" height=\"59\" \/><\/p>\n<p>woke, karena judulna glassy, gw kasiin efek glass di top header button na. salah satu cara na, make layer mask.<\/p>\n<p>bikin satu shape lagi, tempat kan di atas layer sblumna. kali ini ukurana lebih kecil dari sebelumna<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/CSS%20Glassy%20Button\/css_glassyb3.png\" width=\"117\" height=\"64\" \/> <\/p>\n<p>klik pada ikon add layer mask <img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/CSS%20Glassy%20Button\/mask.png\" width=\"16\" height=\"14\" \/><\/p>\n<p>akan muncul tanda mask di sebelah layer na:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/CSS%20Glassy%20Button\/css_glassyb9b.png\" width=\"207\" height=\"144\" \/> <\/p>\n<p>baru dah lu pencet tombol D (bwat nge-reset color palet na mnjadi hitam putih)<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/CSS%20Glassy%20Button\/css_glassyb6a.png\" width=\"62\" height=\"54\" \/> <\/p>\n<p>woke, lanjut ke tool gradasi, tarik dah gradasi na pada layer mask tadi. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/CSS%20Glassy%20Button\/css_glassyb9.png\" width=\"118\" height=\"67\" \/> <\/p>\n<p>jadi ke gini dah hasil glassy na:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/CSS%20Glassy%20Button\/css_glassyb4c.png\" width=\"208\" height=\"240\" \/> <\/p>\n<p>hmm&#8230;. bikin juga satu objek baru lagi untuk button overlay na<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/CSS%20Glassy%20Button\/css-glassy-button-over.png\" width=\"94\" height=\"45\" \/> <\/p>\n<p>==============================<\/p>\n<p>uhuiiii&#8230; naaah skarang kita bikin CSS code na&#8230;<\/p>\n<p>pertama bwat doku HTML baru &#8230;. namana <strong>button.html<\/strong><\/p>\n<p>antara tag BODY kasi code html bwat button na: <\/p>\n<div class=\"tagContent\">&lt;input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Button&quot; \/&gt;<\/div>\n<p>tag code diatas akan menampilkan tombol default pada browser. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/CSS%20Glassy%20Button\/css_glassyb11.png\" width=\"71\" height=\"41\"><\/p>\n<p>kedua bikin fiel CSS na, nama na <strong>style-button.css<\/strong><\/p>\n<p>kasi code CSS ke gini:<\/p>\n<div class=\"tagContent\">\n<p>#buttonGw { width:95px; height:45px; background:url(css-glassy-button.png); border:none; color:#FFFFFF; size:12px; font-weight:bold; cursor:hand; }<\/p>\n<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>\n<\/div>\n<p>woke tinggal lu link kan style CSS na, kasi code HTML dibawah ini, antara tag head.<\/p>\n<div class=\"tagContent\">&lt;link href=&quot;style-button.css&quot; rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; \/&gt;<\/div>\n<p>terakhir edit HTML code tombol lu.<\/p>\n<div class=\"tagContent\">&lt;input type=&quot;button&quot; id=&quot;buttonGw&quot; onMouseOver=&quot;this.id=&#8217;buttonGwOver&#8217;;&quot; onMouseOut=&quot;this.id=&#8217;buttonGw&#8217;;&quot; name=&quot;Submit&quot; value=&quot;Button&quot; \/&gt;<\/div>\n<p>tes dah, file button.html lu.. hehheeek bijimane&#8230;kikikkkkk moga sukses&#8230;cobain yak.. \ud83d\ude00<\/p>\n<p class=\"facebook\"><a href=\"http:\/\/www.facebook.com\/share.php?u=https:\/\/www.dremi.info\/articles\/css-glassy-button.html\" target=\"_blank\" title=\"Share on Facebook\">Share on Facebook<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>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) Share on Facebook<\/p>\n<p class=\"facebook\"><a href=\"http:\/\/www.facebook.com\/share.php?u=https:\/\/www.dremi.info\/articles\/css-glassy-button.html\" target=\"_blank\" title=\"Share on Facebook\">Share on Facebook<\/a><\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[26,35,46,106,111,248],"_links":{"self":[{"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/posts\/58"}],"collection":[{"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/comments?post=58"}],"version-history":[{"count":0,"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/posts\/58\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/media?parent=58"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/categories?post=58"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/tags?post=58"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}