{"id":138,"date":"2011-01-12T19:27:47","date_gmt":"2011-01-13T00:27:47","guid":{"rendered":"http:\/\/jamesroberts.name\/blog\/?p=138"},"modified":"2011-01-12T19:29:55","modified_gmt":"2011-01-13T00:29:55","slug":"css3-dual-background-glow-highlight-button","status":"publish","type":"post","link":"https:\/\/jamesroberts.name\/blog\/2011\/01\/12\/css3-dual-background-glow-highlight-button\/","title":{"rendered":"CSS3 dual background glow highlight button"},"content":{"rendered":"<p>I have been working on a new UI at work and decided to go full on with it in HTML5 and CSS3 because its 98% for internal company users who all use a &#8220;modern browser&#8221; and I don&#8217;t have to worry about those pesky IE users.  The following code is for a cool looking glow highlight button which involves multiple backgrounds with rgba color.  I have included three states: normal, hover, and active.<\/p>\n<p>Enjoy!<\/p>\n<p><button id=\"css3-button\" type=\"button\">Cool Arse Button<\/button><\/p>\n<style>\nbutton#css3-button{\n\tpadding: 0.4em 1em 0.4em 1em;\n\tfont-family:Helvetica, Arial, sans-serif;\n\tfont-size:1.1em;\n\tcolor: #2885ab;\n\tletter-spacing:-0.05em;\n\ttext-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4), 0px 0px 6px rgba(0, 0, 0, 0.2);\n\tfont-weight:bold;\n\tcursor:pointer;\n\tborder:1px solid #FFFFFF;\n\t-moz-border-radius: 0.7em;\n\t-webkit-border-radius: 0.7em;\n\tborder-radius: 0.7em;\n\tbackground: -moz-linear-gradient(left, rgba(131, 182, 202,  0.8), rgba(131, 182, 202, 0.2) 15%, rgba(131, 182, 202, 0) 50%, rgba(131, 182, 202, 0.2) 85%, rgba(131, 182, 202, 0.8)),\n\t\t\t\t-moz-linear-gradient(top, #e2f4fb, #b5d4e0 50%, #b5d4e0 50%, #91bfd1);\n\tbackground: -webkit-gradient(linear, 0% 0%, 100% 0%, from(rgba(131, 182, 202, 0.8)), to(rgba(131, 182, 202, 0.8)), color-stop(.15, rgba(131, 182, 202, 0.2)), color-stop(.5, rgba(131, 182, 202, 0)), color-stop(.85, rgba(131, 182, 202, 0.2))),\n\t\t\t\t-webkit-gradient(linear, 0% 0%, 0% 100%, from(#e2f4fb), to(#91bfd1), color-stop(.5, #b5d4e0), color-stop(.5, #b5d4e0));\n\t-moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);\n\t-webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);\n\tbox-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);\n}\nbutton#css3-button:hover{\n\tcolor:#01678F;\n\tbackground: -moz-linear-gradient(left, rgba(131, 182, 202,  0.8), rgba(131, 182, 202, 0.2) 15%, rgba(131, 182, 202, 0) 50%, rgba(131, 182, 202, 0.2) 85%, rgba(131, 182, 202, 0.8)),\n\t\t\t\t-moz-linear-gradient(top, #f7f7f7, #e2f4fb 50%, #e2f4fb 50%, #91bfd1);\n\tbackground: -webkit-gradient(linear, 0% 0%, 100% 0%, from(rgba(131, 182, 202, 0.8)), to(rgba(131, 182, 202, 0.8)), color-stop(.15, rgba(131, 182, 202, 0.2)), color-stop(.5, rgba(131, 182, 202, 0)), color-stop(.85, rgba(131, 182, 202, 0.2))),\n\t\t\t\t-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f7f7f7), to(#91bfd1), color-stop(.5, #e2f4fb), color-stop(.5, #e2f4fb));\n}\nbutton#css3-button:active{\n\tcolor:#6EAAC2;\n\tborder-color: #999999 #f1f1f1 #f1f1f1 #aaaaaa;\n\tbackground: -moz-linear-gradient(top, #f1f1f1, #dddddd);\n\tbackground: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#dddddd));\n}<\/p>\n<\/style>\n<pre lang=\"html\">\r\n\r\n\r\n<button id=\"css3-button\" type=\"button\">Cool Arse Button<\/button>\r\n\r\n\r\n<style>\r\nbutton#css3-button{\r\n\tpadding: 0.4em 1em 0.4em 1em;\r\n\tfont-family:Helvetica, Arial, sans-serif;\r\n\tfont-size:1.1em;\r\n\tcolor: #2885ab;\r\n\tletter-spacing:-0.05em;\r\n\ttext-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4), 0px 0px 6px rgba(0, 0, 0, 0.2);\r\n\tfont-weight:bold;\r\n\tcursor:pointer;\r\n\tborder:1px solid #FFFFFF;\r\n\t-moz-border-radius: 0.7em;\r\n\t-webkit-border-radius: 0.7em;\r\n\tborder-radius: 0.7em;\r\n\tbackground: -moz-linear-gradient(left, rgba(131, 182, 202,  0.8), rgba(131, 182, 202, 0.2) 15%, rgba(131, 182, 202, 0) 50%, rgba(131, 182, 202, 0.2) 85%, rgba(131, 182, 202, 0.8)),\r\n\t\t\t\t-moz-linear-gradient(top, #e2f4fb, #b5d4e0 50%, #b5d4e0 50%, #91bfd1);\r\n\tbackground: -webkit-gradient(linear, 0% 0%, 100% 0%, from(rgba(131, 182, 202, 0.8)), to(rgba(131, 182, 202, 0.8)), color-stop(.15, rgba(131, 182, 202, 0.2)), color-stop(.5, rgba(131, 182, 202, 0)), color-stop(.85, rgba(131, 182, 202, 0.2))),\r\n\t\t\t\t-webkit-gradient(linear, 0% 0%, 0% 100%, from(#e2f4fb), to(#91bfd1), color-stop(.5, #b5d4e0), color-stop(.5, #b5d4e0));\r\n\t-moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);\r\n\t-webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);\r\n\tbox-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);\r\n}\r\n\r\nbutton#css3-button:hover{\r\n\tcolor:#01678F;\r\n\tbackground: -moz-linear-gradient(left, rgba(131, 182, 202,  0.8), rgba(131, 182, 202, 0.2) 15%, rgba(131, 182, 202, 0) 50%, rgba(131, 182, 202, 0.2) 85%, rgba(131, 182, 202, 0.8)),\r\n\t\t\t\t-moz-linear-gradient(top, #f7f7f7, #e2f4fb 50%, #e2f4fb 50%, #91bfd1);\r\n\tbackground: -webkit-gradient(linear, 0% 0%, 100% 0%, from(rgba(131, 182, 202, 0.8)), to(rgba(131, 182, 202, 0.8)), color-stop(.15, rgba(131, 182, 202, 0.2)), color-stop(.5, rgba(131, 182, 202, 0)), color-stop(.85, rgba(131, 182, 202, 0.2))),\r\n\t\t\t\t-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f7f7f7), to(#91bfd1), color-stop(.5, #e2f4fb), color-stop(.5, #e2f4fb));\r\n}\r\n\r\nbutton#css3-button:active{\r\n\tcolor:#6EAAC2;\r\n\tborder-color: #999999 #f1f1f1 #f1f1f1 #aaaaaa;\r\n\tbackground: -moz-linear-gradient(top, #f1f1f1, #dddddd);\r\n\tbackground: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#dddddd));\r\n}\r\n\r\n<\/style>\r\n\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>I have been working on a new UI at work and decided to go full on with it in HTML5 and CSS3 because its 98% for internal company users who all use a &#8220;modern browser&#8221; and I don&#8217;t have to worry about those pesky IE users. The following code is for a cool looking glow [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34],"tags":[66,35,37,36],"_links":{"self":[{"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/posts\/138"}],"collection":[{"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/comments?post=138"}],"version-history":[{"count":6,"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/posts\/138\/revisions"}],"predecessor-version":[{"id":144,"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/posts\/138\/revisions\/144"}],"wp:attachment":[{"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/media?parent=138"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/categories?post=138"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/tags?post=138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}