{"id":1142,"date":"2011-04-09T09:26:24","date_gmt":"2011-04-09T16:26:24","guid":{"rendered":"http:\/\/www.bryanhadaway.com\/?p=1142"},"modified":"2025-05-22T15:25:44","modified_gmt":"2025-05-22T22:25:44","slug":"pure-css3-only-graphic-button","status":"publish","type":"post","link":"https:\/\/webguy.io\/blog\/pure-css3-only-graphic-button\/","title":{"rendered":"Pure CSS3 Only Graphic Button"},"content":{"rendered":"<style>\n.bttn-style{display:inline-block;font-family:georgia,serif;font-size:20px;color:#fff;text-shadow:1px 1px 2px #000;text-decoration:none;padding:10px 15px;border:1px solid #09f;box-shadow:2px 2px 2px #333;background:linear-gradient(#40b3ff, #09f);opacity:0.9}\n.bttn-style:hover{opacity:1}\n<\/style>\n<p>This button contains gradient and shadow effects without the use of actual graphics or JavaScript whatsoever.<\/p>\n<p>I&#8217;m using just about every CSS style that could be used on the button for your reference. Although, some may find that it looks better by pulling a few styles back. You could always <a href=\"https:\/\/www.css3.info\/\">add more effects too<\/a>.<\/p>\n<p>Also, you&#8217;ll find as you change colors the shadows may no longer look good and become blurry. It&#8217;s a fine art to find that balance among different colors.<\/p>\n<p><em>Note \u2014 This isn&#8217;t very friendly to older IE versions.<\/em><\/p>\n<h2>Demo<\/h2>\n<p><a href=\"#\" class=\"bttn-style\">Learn More<\/a><\/p>\n<h2>Code<\/h2>\n<h3>HTML<\/h3>\n<pre><code>&lt;a href=&quot;#&quot; class=&quot;bttn-style&quot;&gt;Learn More&lt;\/a&gt;<\/code><\/pre>\n<h3>CSS<\/h3>\n<pre style=\"white-space:pre\"><code>.bttn-style{display:inline-block;font-family:georgia,serif;font-size:20px;color:#fff;text-shadow:1px 1px 2px #000;text-decoration:none;padding:10px 15px;border:1px solid #09f;box-shadow:2px 2px 2px #333;background:linear-gradient(#40b3ff, #09f);opacity:0.9}\r\n.bttn-style:hover{opacity:1}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>This button contains gradient and shadow effects without the use of actual graphics or JavaScript whatsoever. I&#8217;m using just about every CSS style that could be used on the button for your reference. Although, some may find that it looks better by pulling a few styles back. You could always add more effects too. Also, <a href=\"https:\/\/webguy.io\/blog\/pure-css3-only-graphic-button\/\" class=\"more-link\">&#8230;<span class=\"screen-reader-text\">  Pure CSS3 Only Graphic Button<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[39,6,5],"tags":[239,254,207,206,255],"class_list":["post-1142","post","type-post","status-publish","format-standard","hentry","category-code","category-graphic-design","category-web-design","tag-code","tag-css","tag-graphic-design","tag-web-design","tag-xhtml"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/posts\/1142","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/comments?post=1142"}],"version-history":[{"count":0,"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/posts\/1142\/revisions"}],"wp:attachment":[{"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/media?parent=1142"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/categories?post=1142"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/tags?post=1142"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}