{"id":149,"date":"2013-02-12T21:38:57","date_gmt":"2013-02-12T21:38:57","guid":{"rendered":"http:\/\/e-olio.com\/cknow\/cms\/?p=149"},"modified":"2015-04-23T19:39:43","modified_gmt":"2015-04-24T02:39:43","slug":"create-glassy-buttons","status":"publish","type":"post","link":"https:\/\/www.cknow.com\/cms\/blog\/create-glassy-buttons.html","title":{"rendered":"Create Glassy Buttons"},"content":{"rendered":"<p>Many sites use glassy buttons. Many tutorials try to explain how to build them. It&#8217;s detailed work using layers and the like but you don&#8217;t have to go through all that because&#8230;<\/p>\n<p>One website builds them for you. Take this example (which just changes color on mouseover)&#8230;<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" style=\"border: 0pt none;\" title=\"Button Example\" onmouseover=\"this.src='https:\/\/www.cknow.com\/cms\/wp-content\/uploads\/2013\/02\/button_1.gif';\" onmouseout=\"this.src='https:\/\/www.cknow.com\/cms\/wp-content\/uploads\/2013\/02\/button_0.gif';\" src=\"https:\/\/www.cknow.com\/cms\/wp-content\/uploads\/2013\/02\/button_0.gif\" alt=\"Button Example\" width=\"200\" height=\"30\" \/><\/p>\n<p>It took all of about 10 seconds to build and the files necessary for display of the button in three formats (gif, jpg, and png) were zipped into a package along with the options selected in a readme file. Just click on a link and download the package, then use the button.<\/p>\n<p>Best of all: it&#8217;s free.<\/p>\n<p>Where is this generator? Here: http:\/\/www.netdenizen.com\/buttonmill\/glassy.php<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.cknow.com\/cms\/wp-content\/uploads\/2013\/02\/weblink.png\" alt=\"Web Link\" width=\"16\" height=\"16\" class=\"alignnone size-full wp-image-7\" \/><\/p>\n<p>Enjoy!<\/p>\n<p>[Comments from original 8\/2\/2009 post.]<\/p>\n<p>Arnie<br \/>\nSaid this on 2009-10-28 At 10:38 am<br \/>\nYes, this site is very helpful in producing fancy buttons quickly.<\/p>\n<p>Yet, I am rather a beginner at this. Could you explain to me, once I have downloaded this file with two jpg files. What HTML code do I use when putting this into my website?<\/p>\n<p>#2<br \/>\nArnie<br \/>\nSaid this on 2009-10-28 At 10:45 am<br \/>\nI found the answer on: technojuice.blogspot.com:<\/p>\n<p>The only drawback is that there is not embed code with the image zip file which would have made this super easy to install, TechnoJuice to the rescue !<\/p>\n<p>Just use this line of code to install and get the mouseover \/ rollover effect<br \/>\n[deleted]<\/p>\n<p>#3<br \/>\nDaBoss<br \/>\nSaid this on 2009-10-28 At 10:48 pm<br \/>\nIn reply to #2<br \/>\nSorry for the delay &#8211; was out of town. Yes, you found the answer but you could have also found the same answer by asking your browser to show you the source for this page and then found the reference to the button above and copied that. \ud83d\ude42 [Just a hint for future explorations.]<\/p>\n<p>#4<br \/>\nArnie<br \/>\nSaid this on 2009-10-29 At 01:49 am<br \/>\nIn reply to #3<br \/>\nThat&#8217;s a great idea!<\/p>\n<p>(anyhow I was having some trouble with the html I found. So now, if I compare the html that I found, with your html &#8212; I think I am beginning to understand how to use it)<\/p>\n<p>#5<br \/>\nArnie<br \/>\nSaid this on 2009-11-08 At 05:09 pm<br \/>\nI am confused. Now, after a couple of weeks, I have come back to Netdenizen.com site to make some more buttons.<\/p>\n<p>I remember how to fill in the boxes. But I can&#8217;t find a button to click on to produce my newly designed button! Where am I supposed to click?<\/p>\n<p>#7<br \/>\nDaBoss<br \/>\nSaid this on 2009-11-08 At 06:39 pm<br \/>\nIn reply to #5<br \/>\nYou can press the Enter key but the &#8220;Reload&#8221; button at the top is apparently the proper choice. Make your changes in the various fields, hit the Reload button and observe the results, and then, if you like it, click on the download link.<\/p>\n<p>#6<br \/>\nArnie<br \/>\nSaid this on 2009-11-08 At 05:14 pm<br \/>\nI guess I just figured it out. He wants us to push our &#8216;enter&#8217; key on our keyboard!<\/p>\n<p>Gosh, why not put a button on the button website titled &#8220;Make the button&#8221;?<\/p>\n<p>#8<br \/>\nArnie<br \/>\nSaid this on 2009-11-09 At 11:39 pm<br \/>\nMr. Boss,<\/p>\n<p>This is getting rather lengthy &#8212; but I had one more problem which I guess i solved.<\/p>\n<p>(first of all, yes, &#8220;Reload&#8221; does produce the requested button. I guess I find &#8216;reload&#8217; as a little confusing. I would prefer something like &#8216;Make my button&#8217;<br \/>\nMy new problem was: the text of the button produced was not when shown on my website:<\/p>\n<p>http:\/\/choveveitzion.wordpress.com\/tris\/<\/p>\n<p>I was using the JPEG format of the buttons. Next I tried the GIF version &#8212; also not clear.<\/p>\n<p>Finally with the Gif version &#8212; vwalla! &#8212; the text was clear. Did you find this too?<\/p>\n<p>#9<br \/>\nDaBoss<br \/>\nSaid this on 2009-11-10 At 12:01 am<br \/>\nIn reply to #8<br \/>\nJPEG images will always be less clear than GIF images as JPEG compresses with losses. GIF compresses without information loss but has a limited color palette so may or may not be clear. PNG also generally uses loss-less compression and a larger palette and so usually produces the best images but some earlier browsers don&#8217;t render PNG transparency well. So, there are various trade-offs when using graphics.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Many sites use glassy buttons. Many tutorials try to explain how to build them. It&#8217;s detailed work using layers and the like but you don&#8217;t have to go through all that because&#8230; One website builds them for you. Take this example (which just changes color on mouseover)&#8230; It took all of about 10 seconds to [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-149","post","type-post","status-publish","format-standard","hentry","category-blog","entry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Create Glassy Buttons - C-Know Media<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.cknow.com\/cms\/blog\/create-glassy-buttons.html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Glassy Buttons - C-Know Media\" \/>\n<meta property=\"og:description\" content=\"Many sites use glassy buttons. Many tutorials try to explain how to build them. It&#8217;s detailed work using layers and the like but you don&#8217;t have to go through all that because&#8230; One website builds them for you. Take this example (which just changes color on mouseover)&#8230; It took all of about 10 seconds to [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.cknow.com\/cms\/blog\/create-glassy-buttons.html\" \/>\n<meta property=\"og:site_name\" content=\"C-Know Media\" \/>\n<meta property=\"article:published_time\" content=\"2013-02-12T21:38:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-04-24T02:39:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.cknow.com\/cms\/wp-content\/uploads\/2013\/02\/button_1.gif\" \/>\n<meta name=\"author\" content=\"DaBoss\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DaBoss\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.cknow.com\\\/cms\\\/blog\\\/create-glassy-buttons.html#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.cknow.com\\\/cms\\\/blog\\\/create-glassy-buttons.html\"},\"author\":{\"name\":\"DaBoss\",\"@id\":\"https:\\\/\\\/www.cknow.com\\\/cms\\\/#\\\/schema\\\/person\\\/47944007814fe46e32a1ebee5954638f\"},\"headline\":\"Create Glassy Buttons\",\"datePublished\":\"2013-02-12T21:38:57+00:00\",\"dateModified\":\"2015-04-24T02:39:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.cknow.com\\\/cms\\\/blog\\\/create-glassy-buttons.html\"},\"wordCount\":702,\"image\":{\"@id\":\"https:\\\/\\\/www.cknow.com\\\/cms\\\/blog\\\/create-glassy-buttons.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.cknow.com\\\/cms\\\/wp-content\\\/uploads\\\/2013\\\/02\\\/button_1.gif\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.cknow.com\\\/cms\\\/blog\\\/create-glassy-buttons.html\",\"url\":\"https:\\\/\\\/www.cknow.com\\\/cms\\\/blog\\\/create-glassy-buttons.html\",\"name\":\"Create Glassy Buttons - C-Know Media\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.cknow.com\\\/cms\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.cknow.com\\\/cms\\\/blog\\\/create-glassy-buttons.html#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.cknow.com\\\/cms\\\/blog\\\/create-glassy-buttons.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.cknow.com\\\/cms\\\/wp-content\\\/uploads\\\/2013\\\/02\\\/button_1.gif\",\"datePublished\":\"2013-02-12T21:38:57+00:00\",\"dateModified\":\"2015-04-24T02:39:43+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.cknow.com\\\/cms\\\/#\\\/schema\\\/person\\\/47944007814fe46e32a1ebee5954638f\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.cknow.com\\\/cms\\\/blog\\\/create-glassy-buttons.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.cknow.com\\\/cms\\\/blog\\\/create-glassy-buttons.html\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.cknow.com\\\/cms\\\/blog\\\/create-glassy-buttons.html#primaryimage\",\"url\":\"https:\\\/\\\/www.cknow.com\\\/cms\\\/wp-content\\\/uploads\\\/2013\\\/02\\\/button_1.gif\",\"contentUrl\":\"https:\\\/\\\/www.cknow.com\\\/cms\\\/wp-content\\\/uploads\\\/2013\\\/02\\\/button_1.gif\",\"width\":200,\"height\":30,\"caption\":\"Red Button\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.cknow.com\\\/cms\\\/blog\\\/create-glassy-buttons.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.cknow.com\\\/cms\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create Glassy Buttons\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.cknow.com\\\/cms\\\/#website\",\"url\":\"https:\\\/\\\/www.cknow.com\\\/cms\\\/\",\"name\":\"C-Know Media\",\"description\":\"Fun media for all\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.cknow.com\\\/cms\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.cknow.com\\\/cms\\\/#\\\/schema\\\/person\\\/47944007814fe46e32a1ebee5954638f\",\"name\":\"DaBoss\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d4ba3f829b22682345f1dec9f43e839d822e1b4c570d7ce15475db8b4d5ce111?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d4ba3f829b22682345f1dec9f43e839d822e1b4c570d7ce15475db8b4d5ce111?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d4ba3f829b22682345f1dec9f43e839d822e1b4c570d7ce15475db8b4d5ce111?s=96&d=mm&r=g\",\"caption\":\"DaBoss\"},\"url\":\"https:\\\/\\\/www.cknow.com\\\/cms\\\/author\\\/daboss-2\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create Glassy Buttons - C-Know Media","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.cknow.com\/cms\/blog\/create-glassy-buttons.html","og_locale":"en_US","og_type":"article","og_title":"Create Glassy Buttons - C-Know Media","og_description":"Many sites use glassy buttons. Many tutorials try to explain how to build them. It&#8217;s detailed work using layers and the like but you don&#8217;t have to go through all that because&#8230; One website builds them for you. Take this example (which just changes color on mouseover)&#8230; It took all of about 10 seconds to [&hellip;]","og_url":"https:\/\/www.cknow.com\/cms\/blog\/create-glassy-buttons.html","og_site_name":"C-Know Media","article_published_time":"2013-02-12T21:38:57+00:00","article_modified_time":"2015-04-24T02:39:43+00:00","og_image":[{"url":"https:\/\/www.cknow.com\/cms\/wp-content\/uploads\/2013\/02\/button_1.gif","type":"","width":"","height":""}],"author":"DaBoss","twitter_misc":{"Written by":"DaBoss","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.cknow.com\/cms\/blog\/create-glassy-buttons.html#article","isPartOf":{"@id":"https:\/\/www.cknow.com\/cms\/blog\/create-glassy-buttons.html"},"author":{"name":"DaBoss","@id":"https:\/\/www.cknow.com\/cms\/#\/schema\/person\/47944007814fe46e32a1ebee5954638f"},"headline":"Create Glassy Buttons","datePublished":"2013-02-12T21:38:57+00:00","dateModified":"2015-04-24T02:39:43+00:00","mainEntityOfPage":{"@id":"https:\/\/www.cknow.com\/cms\/blog\/create-glassy-buttons.html"},"wordCount":702,"image":{"@id":"https:\/\/www.cknow.com\/cms\/blog\/create-glassy-buttons.html#primaryimage"},"thumbnailUrl":"https:\/\/www.cknow.com\/cms\/wp-content\/uploads\/2013\/02\/button_1.gif","articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.cknow.com\/cms\/blog\/create-glassy-buttons.html","url":"https:\/\/www.cknow.com\/cms\/blog\/create-glassy-buttons.html","name":"Create Glassy Buttons - C-Know Media","isPartOf":{"@id":"https:\/\/www.cknow.com\/cms\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.cknow.com\/cms\/blog\/create-glassy-buttons.html#primaryimage"},"image":{"@id":"https:\/\/www.cknow.com\/cms\/blog\/create-glassy-buttons.html#primaryimage"},"thumbnailUrl":"https:\/\/www.cknow.com\/cms\/wp-content\/uploads\/2013\/02\/button_1.gif","datePublished":"2013-02-12T21:38:57+00:00","dateModified":"2015-04-24T02:39:43+00:00","author":{"@id":"https:\/\/www.cknow.com\/cms\/#\/schema\/person\/47944007814fe46e32a1ebee5954638f"},"breadcrumb":{"@id":"https:\/\/www.cknow.com\/cms\/blog\/create-glassy-buttons.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.cknow.com\/cms\/blog\/create-glassy-buttons.html"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.cknow.com\/cms\/blog\/create-glassy-buttons.html#primaryimage","url":"https:\/\/www.cknow.com\/cms\/wp-content\/uploads\/2013\/02\/button_1.gif","contentUrl":"https:\/\/www.cknow.com\/cms\/wp-content\/uploads\/2013\/02\/button_1.gif","width":200,"height":30,"caption":"Red Button"},{"@type":"BreadcrumbList","@id":"https:\/\/www.cknow.com\/cms\/blog\/create-glassy-buttons.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.cknow.com\/cms\/"},{"@type":"ListItem","position":2,"name":"Create Glassy Buttons"}]},{"@type":"WebSite","@id":"https:\/\/www.cknow.com\/cms\/#website","url":"https:\/\/www.cknow.com\/cms\/","name":"C-Know Media","description":"Fun media for all","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.cknow.com\/cms\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.cknow.com\/cms\/#\/schema\/person\/47944007814fe46e32a1ebee5954638f","name":"DaBoss","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/d4ba3f829b22682345f1dec9f43e839d822e1b4c570d7ce15475db8b4d5ce111?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/d4ba3f829b22682345f1dec9f43e839d822e1b4c570d7ce15475db8b4d5ce111?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d4ba3f829b22682345f1dec9f43e839d822e1b4c570d7ce15475db8b4d5ce111?s=96&d=mm&r=g","caption":"DaBoss"},"url":"https:\/\/www.cknow.com\/cms\/author\/daboss-2"}]}},"_links":{"self":[{"href":"https:\/\/www.cknow.com\/cms\/wp-json\/wp\/v2\/posts\/149","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cknow.com\/cms\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cknow.com\/cms\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cknow.com\/cms\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cknow.com\/cms\/wp-json\/wp\/v2\/comments?post=149"}],"version-history":[{"count":1,"href":"https:\/\/www.cknow.com\/cms\/wp-json\/wp\/v2\/posts\/149\/revisions"}],"predecessor-version":[{"id":1562,"href":"https:\/\/www.cknow.com\/cms\/wp-json\/wp\/v2\/posts\/149\/revisions\/1562"}],"wp:attachment":[{"href":"https:\/\/www.cknow.com\/cms\/wp-json\/wp\/v2\/media?parent=149"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cknow.com\/cms\/wp-json\/wp\/v2\/categories?post=149"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cknow.com\/cms\/wp-json\/wp\/v2\/tags?post=149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}