{"id":504,"date":"2010-04-22T05:57:34","date_gmt":"2010-04-22T10:57:34","guid":{"rendered":"https:\/\/webdesignerwall.com\/tutorials\/css3-gradient-buttons\/"},"modified":"2011-03-08T00:40:54","modified_gmt":"2011-03-08T05:40:54","slug":"css3-gradient-buttons","status":"publish","type":"post","link":"https:\/\/webdesignerwall.com\/tutorials\/css3-gradient-buttons","title":{"rendered":"CSS3 Gradient Buttons"},"content":{"rendered":"<p><big>Last week I talked about <a href=\"https:\/\/webdesignerwall.com\/tutorials\/cross-browser-css-gradient\/\">Cross-Browser CSS Gradient<\/a>. Today I&#8217;m going to show you how to put the CSS gradient feature in a good practical use. Check out my <a href=\"https:\/\/webdesignerwall.com\/demo\/css-buttons.html\">demo<\/a> to see a set of gradient buttons that I have created with just CSS (no image or Javascript). The buttons are scalable based on the font-size. The button size can be easily adjusted by changing the padding and font-size values. The best part about this method is it can be applied to any HTML element such as div, span, p, a, button, input, etc.<\/big><!--more--><\/p>\n<p class=\"image\"><a href=\"https:\/\/webdesignerwall.com\/demo\/css-buttons.html\"><img decoding=\"async\" src=\"https:\/\/webdesignerwall.com\/wp-content\/uploads\/2010\/04\/button-preview.jpg\" alt=\"button states\" \/><\/a><\/p>\n<h3>What Is So Cool About These Buttons?<\/h3>\n<ul>\n<li>Pure CSS: no image or Javascript is used.<\/li>\n<li>The gradient is cross-browser supported (IE, Firefox 3.6, Chrome, and Safari).<\/li>\n<li>Flexible and scalable: button size and rounded corners can be adjusted by changing the font size and padding values.<\/li>\n<li>It has three button states: normal, hover, and active.<\/li>\n<li>It can be applied to any HTML element: a, input, button, span, div, p, h3, etc.<\/li>\n<li>Fallback: if CSS3 is not supported, it will display a regular button (no gradient and shadow).<\/li>\n<\/ul>\n<h3>Preview<\/h3>\n<p>The image below shows how the button will  display in different browsers.<\/p>\n<p class=\"image\"><img decoding=\"async\" src=\"https:\/\/webdesignerwall.com\/wp-content\/uploads\/2010\/04\/browser-preview.gif\" alt=\"preview\" \/><\/p>\n<h3>Button States<\/h3>\n<ul>\n<li>normal state = gradient with border and shadow styles.<\/li>\n<li>hover = darker gradient<\/li>\n<li>active = gradient is reversed, 1px down, and darker font color as well.<\/li>\n<\/ul>\n<p class=\"image\"><img decoding=\"async\" src=\"https:\/\/webdesignerwall.com\/wp-content\/uploads\/2010\/04\/button-states.gif\" alt=\"button states\" \/><\/p>\n<h3>General Styles For The Button<\/h3>\n<p>The following code is the general styles for the .button class. I use em value in the padding and border-radius property to make it scalable base on the font-size. To adjust the rounded corners and button size, simply change the border-radius, font-size and padding values. For example: I can make a smaller button by decreasing the font-size and padding values  (see <a href=\"https:\/\/webdesignerwall.com\/demo\/css-buttons.html\">demo<\/a>).<\/p>\n<p>For more details on border-radius, text-shadow, and box-shadow, read my article <a href=\"https:\/\/webdesignerwall.com\/tutorials\/the-basics-of-css3\/\">The Basics of CSS3<\/a>.<\/p>\n<pre><code>.button {\r\n\tdisplay: inline-block;\r\n\toutline: none;\r\n\tcursor: pointer;\r\n\ttext-align: center;\r\n\ttext-decoration: none;\r\n\tfont: 14px\/100% Arial, Helvetica, sans-serif;\r\n\tpadding: .5em 2em .55em;\r\n\ttext-shadow: 0 1px 1px rgba(0,0,0,.3);\r\n\t-webkit-border-radius: .5em; \r\n\t-moz-border-radius: .5em;\r\n\tborder-radius: .5em;\r\n\t-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);\r\n\t-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);\r\n\tbox-shadow: 0 1px 2px rgba(0,0,0,.2);\r\n}\r\n.button:hover {\r\n\ttext-decoration: none;\r\n}\r\n.button:active {\r\n\tposition: relative;\r\n\ttop: 1px;\r\n}\r\n<\/code><\/pre>\n<p class=\"image\"><img decoding=\"async\" src=\"https:\/\/webdesignerwall.com\/wp-content\/uploads\/2010\/04\/button-general-styles.gif\" alt=\"button general styles\" \/><\/p>\n<h3>Color Gradient Styles<\/h3>\n<p>The code below is the CSS styling for the orange button. The first background line is a fallback for the non-CSS3 browsers, the second line is for Webkit browsers, the third line is for Firefox, and the last line is a gradient filter that is only read by Internet Explorer. <\/p>\n<p>For more details on  CSS gradient,  read my article <a href=\"https:\/\/webdesignerwall.com\/tutorials\/cross-browser-css-gradient\/\">Cross-Browser CSS Gradient<\/a>. <\/p>\n<pre><code>.orange {\r\n\tcolor: #fef4e9;\r\n\tborder: solid 1px #da7c0c;\r\n\tbackground: #f78d1d;\r\n\tbackground: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));\r\n\tbackground: -moz-linear-gradient(top,  #faa51a,  #f47a20);\r\n\tfilter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');\r\n}\r\n.orange:hover {\r\n\tbackground: #f47c20;\r\n\tbackground: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));\r\n\tbackground: -moz-linear-gradient(top,  #f88e11,  #f06015);\r\n\tfilter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');\r\n}\r\n.orange:active {\r\n\tcolor: #fcd3a5;\r\n\tbackground: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));\r\n\tbackground: -moz-linear-gradient(top,  #f47a20,  #faa51a);\r\n\tfilter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');\r\n}\r\n<\/code><\/pre>\n<p class=\"image\"><img decoding=\"async\" src=\"https:\/\/webdesignerwall.com\/wp-content\/uploads\/2010\/04\/css-color-styles.gif\" alt=\"button general styles\" \/><\/p>\n<h3>How To Use My Buttons?<\/h3>\n<p>Lets say you like the blue button and want to use it on your page: <\/p>\n<ul>\n<li>First, copy the .button and .blue CSS (view <a href=\"https:\/\/webdesignerwall.com\/demo\/css-buttons.html\">demo source code<\/a>).<\/li>\n<li>Then, add  class=&quot;button blue&quot; to the HTML element where you want the button to be (eg. <code>&lt;a href=&quot;#&quot; class=&quot;button blue&quot;&gt;Button&lt;\/a&gt;<\/code>). The CSS classes can be applied to any element such as link, p, span, div, input, button, etc.<\/li>\n<\/ul>\n<p class=\"image\"><img decoding=\"async\" src=\"https:\/\/webdesignerwall.com\/wp-content\/uploads\/2010\/04\/applying.jpg\" alt=\"applying\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Last week I talked about Cross-Browser CSS Gradient. Today I&#8217;m going to show you how to put the CSS gradient feature in a good practical use. Check out my demo to see a set of gradient buttons that I have created with just CSS (no image or Javascript). The buttons are scalable based on the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[31,1],"tags":[21],"class_list":["post-504","post","type-post","status-publish","format-standard","hentry","category-featured","category-tutorials","tag-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS3 Gradient Buttons - Web Designer Wall<\/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:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/css3-gradient-buttons\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS3 Gradient Buttons - Web Designer Wall\" \/>\n<meta property=\"og:description\" content=\"Last week I talked about Cross-Browser CSS Gradient. Today I&#8217;m going to show you how to put the CSS gradient feature in a good practical use. Check out my demo to see a set of gradient buttons that I have created with just CSS (no image or Javascript). The buttons are scalable based on the [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/css3-gradient-buttons\" \/>\n<meta property=\"og:site_name\" content=\"Web Designer Wall\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webdesignerwall\" \/>\n<meta property=\"article:published_time\" content=\"2010-04-22T10:57:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2011-03-08T05:40:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webdesignerwall.mystagingwebsite.com\/wp-content\/uploads\/2010\/04\/button-preview.jpg\" \/>\n<meta name=\"author\" content=\"Aigars Silkalns\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@nickla\" \/>\n<meta name=\"twitter:site\" content=\"@nickla\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Aigars Silkalns\" \/>\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\":\"WebPage\",\"@id\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/css3-gradient-buttons\",\"url\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/css3-gradient-buttons\",\"name\":\"CSS3 Gradient Buttons - Web Designer Wall\",\"isPartOf\":{\"@id\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/css3-gradient-buttons#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/css3-gradient-buttons#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdesignerwall.com\/wp-content\/uploads\/2010\/04\/button-preview.jpg\",\"datePublished\":\"2010-04-22T10:57:34+00:00\",\"dateModified\":\"2011-03-08T05:40:54+00:00\",\"author\":{\"@id\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/#\/schema\/person\/9c6a1ce807a45918d4157d0497157c84\"},\"breadcrumb\":{\"@id\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/css3-gradient-buttons#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/css3-gradient-buttons\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/css3-gradient-buttons#primaryimage\",\"url\":\"https:\/\/webdesignerwall.com\/wp-content\/uploads\/2010\/04\/button-preview.jpg\",\"contentUrl\":\"https:\/\/webdesignerwall.com\/wp-content\/uploads\/2010\/04\/button-preview.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/css3-gradient-buttons#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS3 Gradient Buttons\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/#website\",\"url\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/\",\"name\":\"Web Designer Wall\",\"description\":\"Design Trends and Tutorials - A wall of design ideas, web trends, and tutorials.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/#\/schema\/person\/9c6a1ce807a45918d4157d0497157c84\",\"name\":\"Aigars Silkalns\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ba8ffcefbaaec481373d85072fdfdae628449bf1ebae707ca57aa3b69dbbf350?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ba8ffcefbaaec481373d85072fdfdae628449bf1ebae707ca57aa3b69dbbf350?s=96&d=mm&r=g\",\"caption\":\"Aigars Silkalns\"},\"sameAs\":[\"https:\/\/webdesignerwall.mystagingwebsite.com\"],\"url\":\"https:\/\/webdesignerwall.com\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS3 Gradient Buttons - Web Designer Wall","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:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/css3-gradient-buttons","og_locale":"en_US","og_type":"article","og_title":"CSS3 Gradient Buttons - Web Designer Wall","og_description":"Last week I talked about Cross-Browser CSS Gradient. Today I&#8217;m going to show you how to put the CSS gradient feature in a good practical use. Check out my demo to see a set of gradient buttons that I have created with just CSS (no image or Javascript). The buttons are scalable based on the [&hellip;]","og_url":"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/css3-gradient-buttons","og_site_name":"Web Designer Wall","article_publisher":"https:\/\/www.facebook.com\/webdesignerwall","article_published_time":"2010-04-22T10:57:34+00:00","article_modified_time":"2011-03-08T05:40:54+00:00","og_image":[{"url":"https:\/\/webdesignerwall.mystagingwebsite.com\/wp-content\/uploads\/2010\/04\/button-preview.jpg","type":"","width":"","height":""}],"author":"Aigars Silkalns","twitter_card":"summary_large_image","twitter_creator":"@nickla","twitter_site":"@nickla","twitter_misc":{"Written by":"Aigars Silkalns","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/css3-gradient-buttons","url":"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/css3-gradient-buttons","name":"CSS3 Gradient Buttons - Web Designer Wall","isPartOf":{"@id":"https:\/\/webdesignerwall.mystagingwebsite.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/css3-gradient-buttons#primaryimage"},"image":{"@id":"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/css3-gradient-buttons#primaryimage"},"thumbnailUrl":"https:\/\/webdesignerwall.com\/wp-content\/uploads\/2010\/04\/button-preview.jpg","datePublished":"2010-04-22T10:57:34+00:00","dateModified":"2011-03-08T05:40:54+00:00","author":{"@id":"https:\/\/webdesignerwall.mystagingwebsite.com\/#\/schema\/person\/9c6a1ce807a45918d4157d0497157c84"},"breadcrumb":{"@id":"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/css3-gradient-buttons#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/css3-gradient-buttons"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/css3-gradient-buttons#primaryimage","url":"https:\/\/webdesignerwall.com\/wp-content\/uploads\/2010\/04\/button-preview.jpg","contentUrl":"https:\/\/webdesignerwall.com\/wp-content\/uploads\/2010\/04\/button-preview.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/css3-gradient-buttons#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webdesignerwall.mystagingwebsite.com\/"},{"@type":"ListItem","position":2,"name":"CSS3 Gradient Buttons"}]},{"@type":"WebSite","@id":"https:\/\/webdesignerwall.mystagingwebsite.com\/#website","url":"https:\/\/webdesignerwall.mystagingwebsite.com\/","name":"Web Designer Wall","description":"Design Trends and Tutorials - A wall of design ideas, web trends, and tutorials.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webdesignerwall.mystagingwebsite.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/webdesignerwall.mystagingwebsite.com\/#\/schema\/person\/9c6a1ce807a45918d4157d0497157c84","name":"Aigars Silkalns","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdesignerwall.mystagingwebsite.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ba8ffcefbaaec481373d85072fdfdae628449bf1ebae707ca57aa3b69dbbf350?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ba8ffcefbaaec481373d85072fdfdae628449bf1ebae707ca57aa3b69dbbf350?s=96&d=mm&r=g","caption":"Aigars Silkalns"},"sameAs":["https:\/\/webdesignerwall.mystagingwebsite.com"],"url":"https:\/\/webdesignerwall.com\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/webdesignerwall.com\/wp-json\/wp\/v2\/posts\/504","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdesignerwall.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdesignerwall.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdesignerwall.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webdesignerwall.com\/wp-json\/wp\/v2\/comments?post=504"}],"version-history":[{"count":1,"href":"https:\/\/webdesignerwall.com\/wp-json\/wp\/v2\/posts\/504\/revisions"}],"predecessor-version":[{"id":615,"href":"https:\/\/webdesignerwall.com\/wp-json\/wp\/v2\/posts\/504\/revisions\/615"}],"wp:attachment":[{"href":"https:\/\/webdesignerwall.com\/wp-json\/wp\/v2\/media?parent=504"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdesignerwall.com\/wp-json\/wp\/v2\/categories?post=504"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdesignerwall.com\/wp-json\/wp\/v2\/tags?post=504"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}