.btn {\r\n background:#20c167 url(btnAccept-default.gif) repeat-x left bottom;\r\n }\r\n .decline {\r\n background:#ff3443 url(btnDecline-default.gif) repeat-x left bottom;\r\n }<\/code><\/pre>\n <\/p>\n
<\/p>\n
With our gradient background image in place, we have an okay looking button in IE7\/IE8 and a pretty nice one in IE9. Unfortunately, there still isn’t text shadow support in IE9, but at least we have rounded corners.<\/p>\n
Finishing Touches<\/h3>\n
Lastly, for a nice button press effect, we’ll reverse the gradient colors on the active state of the element.
\n <\/code><\/p>\n
.btn:active {\r\n background:#157f44;\r\n\t background-image:-moz-linear-gradient(top, #157f44, #20c167);\r\n\t background-image:-o-linear-gradient(top, #157f44, #20c167);\r\n background-image:-webkit-gradient(linear, center top, center bottom,\r\n from(#157f44), to(#20c167));\r\n\t background-image:linear-gradient(top, #157f44, #20c167);\r\n }<\/code><\/pre>\nSo there you have it \u2014 a great looking button styled with the latest CSS3 properties that works in all the major browsers.<\/p>\n","protected":false},"excerpt":{"rendered":"
The age of using images for buttons on websites has ended, thanks to expanded browser support for CSS3 properties like rounded corners, gradients and text shadows. Browsers, like … Continue \u2192<\/a><\/p>\n","protected":false},"author":30,"featured_media":22182,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[2136],"tags":[],"aioseo_notices":[],"yoast_head":"\n20 Awesome and Free CSS Buttons and Icons<\/title>\n<meta name=\"description\" content=\"Here are some of the best and free CSS buttons and icons. These free css buttons have clean and modern designs, some even have PSD files included.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webdesigndev.com\/free-css-buttons-icons\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"20 Awesome and Free CSS Buttons and Icons\" \/>\n<meta property=\"og:description\" content=\"Here are some of the best and free CSS buttons and icons. These free css buttons have clean and modern designs, some even have PSD files included.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webdesigndev.com\/free-css-buttons-icons\/\" \/>\n<meta property=\"og:site_name\" content=\"WebDesignDev\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/WebDesignDevBlog\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/pages\/WebDesignDev\/109134615846988\" \/>\n<meta property=\"article:published_time\" content=\"2014-05-08T13:33:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-10-19T10:30:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2014\/04\/Free-CSS-Buttons-and-Icons.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"660\" \/>\n\t<meta property=\"og:image:height\" content=\"330\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Iggy\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/WebDesignDev\" \/>\n<meta name=\"twitter:site\" content=\"@WebDesignDev\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Iggy\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webdesigndev.com\/free-css-buttons-icons\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webdesigndev.com\/free-css-buttons-icons\/\"},\"author\":{\"name\":\"Iggy\",\"@id\":\"https:\/\/webdesigndev.com\/#\/schema\/person\/d25d955ee0786bc10f0cda0dca381194\"},\"headline\":\"20 Awesome and Free CSS Buttons and Icons\",\"datePublished\":\"2014-05-08T13:33:42+00:00\",\"dateModified\":\"2017-10-19T10:30:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webdesigndev.com\/free-css-buttons-icons\/\"},\"wordCount\":1470,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webdesigndev.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/webdesigndev.com\/free-css-buttons-icons\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2014\/04\/Free-CSS-Buttons-and-Icons.jpg\",\"articleSection\":[\"Freebies\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webdesigndev.com\/free-css-buttons-icons\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webdesigndev.com\/free-css-buttons-icons\/\",\"url\":\"https:\/\/webdesigndev.com\/free-css-buttons-icons\/\",\"name\":\"20 Awesome and Free CSS Buttons and Icons\",\"isPartOf\":{\"@id\":\"https:\/\/webdesigndev.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webdesigndev.com\/free-css-buttons-icons\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webdesigndev.com\/free-css-buttons-icons\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2014\/04\/Free-CSS-Buttons-and-Icons.jpg\",\"datePublished\":\"2014-05-08T13:33:42+00:00\",\"dateModified\":\"2017-10-19T10:30:42+00:00\",\"description\":\"Here are some of the best and free CSS buttons and icons. These free css buttons have clean and modern designs, some even have PSD files included.\",\"breadcrumb\":{\"@id\":\"https:\/\/webdesigndev.com\/free-css-buttons-icons\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webdesigndev.com\/free-css-buttons-icons\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdesigndev.com\/free-css-buttons-icons\/#primaryimage\",\"url\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2014\/04\/Free-CSS-Buttons-and-Icons.jpg\",\"contentUrl\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2014\/04\/Free-CSS-Buttons-and-Icons.jpg\",\"width\":660,\"height\":330,\"caption\":\"Free CSS Buttons and Icons\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webdesigndev.com\/free-css-buttons-icons\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webdesigndev.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Freebies\",\"item\":\"https:\/\/webdesigndev.com\/freebies\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"20 Awesome and Free CSS Buttons and Icons\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webdesigndev.com\/#website\",\"url\":\"https:\/\/webdesigndev.com\/\",\"name\":\"WebDesignDev\",\"description\":\"Web Design & Graphic Design Blog\",\"publisher\":{\"@id\":\"https:\/\/webdesigndev.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webdesigndev.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webdesigndev.com\/#organization\",\"name\":\"WebDesignDev\",\"url\":\"https:\/\/webdesigndev.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdesigndev.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2023\/05\/2023-WebDesignDev-Logo.svg\",\"contentUrl\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2023\/05\/2023-WebDesignDev-Logo.svg\",\"width\":601,\"height\":196,\"caption\":\"WebDesignDev\"},\"image\":{\"@id\":\"https:\/\/webdesigndev.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/WebDesignDevBlog\",\"https:\/\/x.com\/WebDesignDev\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webdesigndev.com\/#\/schema\/person\/d25d955ee0786bc10f0cda0dca381194\",\"name\":\"Iggy\",\"description\":\"Iggy is an entrepreneur, blogger, and designer who loves experimenting with new web design techniques, collating creative website designs, and writing about the latest design fonts, themes, plugins, inspiration, and more. You can follow him on Twitter\",\"sameAs\":[\"https:\/\/www.facebook.com\/pages\/WebDesignDev\/109134615846988\",\"https:\/\/x.com\/https:\/\/twitter.com\/WebDesignDev\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"20 Awesome and Free CSS Buttons and Icons","description":"Here are some of the best and free CSS buttons and icons. These free css buttons have clean and modern designs, some even have PSD files included.","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:\/\/webdesigndev.com\/free-css-buttons-icons\/","og_locale":"en_US","og_type":"article","og_title":"20 Awesome and Free CSS Buttons and Icons","og_description":"Here are some of the best and free CSS buttons and icons. These free css buttons have clean and modern designs, some even have PSD files included.","og_url":"https:\/\/webdesigndev.com\/free-css-buttons-icons\/","og_site_name":"WebDesignDev","article_publisher":"https:\/\/www.facebook.com\/WebDesignDevBlog","article_author":"https:\/\/www.facebook.com\/pages\/WebDesignDev\/109134615846988","article_published_time":"2014-05-08T13:33:42+00:00","article_modified_time":"2017-10-19T10:30:42+00:00","og_image":[{"width":660,"height":330,"url":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2014\/04\/Free-CSS-Buttons-and-Icons.jpg","type":"image\/jpeg"}],"author":"Iggy","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/WebDesignDev","twitter_site":"@WebDesignDev","twitter_misc":{"Written by":"Iggy","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webdesigndev.com\/free-css-buttons-icons\/#article","isPartOf":{"@id":"https:\/\/webdesigndev.com\/free-css-buttons-icons\/"},"author":{"name":"Iggy","@id":"https:\/\/webdesigndev.com\/#\/schema\/person\/d25d955ee0786bc10f0cda0dca381194"},"headline":"20 Awesome and Free CSS Buttons and Icons","datePublished":"2014-05-08T13:33:42+00:00","dateModified":"2017-10-19T10:30:42+00:00","mainEntityOfPage":{"@id":"https:\/\/webdesigndev.com\/free-css-buttons-icons\/"},"wordCount":1470,"commentCount":0,"publisher":{"@id":"https:\/\/webdesigndev.com\/#organization"},"image":{"@id":"https:\/\/webdesigndev.com\/free-css-buttons-icons\/#primaryimage"},"thumbnailUrl":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2014\/04\/Free-CSS-Buttons-and-Icons.jpg","articleSection":["Freebies"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webdesigndev.com\/free-css-buttons-icons\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webdesigndev.com\/free-css-buttons-icons\/","url":"https:\/\/webdesigndev.com\/free-css-buttons-icons\/","name":"20 Awesome and Free CSS Buttons and Icons","isPartOf":{"@id":"https:\/\/webdesigndev.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webdesigndev.com\/free-css-buttons-icons\/#primaryimage"},"image":{"@id":"https:\/\/webdesigndev.com\/free-css-buttons-icons\/#primaryimage"},"thumbnailUrl":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2014\/04\/Free-CSS-Buttons-and-Icons.jpg","datePublished":"2014-05-08T13:33:42+00:00","dateModified":"2017-10-19T10:30:42+00:00","description":"Here are some of the best and free CSS buttons and icons. These free css buttons have clean and modern designs, some even have PSD files included.","breadcrumb":{"@id":"https:\/\/webdesigndev.com\/free-css-buttons-icons\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webdesigndev.com\/free-css-buttons-icons\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdesigndev.com\/free-css-buttons-icons\/#primaryimage","url":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2014\/04\/Free-CSS-Buttons-and-Icons.jpg","contentUrl":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2014\/04\/Free-CSS-Buttons-and-Icons.jpg","width":660,"height":330,"caption":"Free CSS Buttons and Icons"},{"@type":"BreadcrumbList","@id":"https:\/\/webdesigndev.com\/free-css-buttons-icons\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webdesigndev.com\/"},{"@type":"ListItem","position":2,"name":"Freebies","item":"https:\/\/webdesigndev.com\/freebies\/"},{"@type":"ListItem","position":3,"name":"20 Awesome and Free CSS Buttons and Icons"}]},{"@type":"WebSite","@id":"https:\/\/webdesigndev.com\/#website","url":"https:\/\/webdesigndev.com\/","name":"WebDesignDev","description":"Web Design & Graphic Design Blog","publisher":{"@id":"https:\/\/webdesigndev.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webdesigndev.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webdesigndev.com\/#organization","name":"WebDesignDev","url":"https:\/\/webdesigndev.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdesigndev.com\/#\/schema\/logo\/image\/","url":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2023\/05\/2023-WebDesignDev-Logo.svg","contentUrl":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2023\/05\/2023-WebDesignDev-Logo.svg","width":601,"height":196,"caption":"WebDesignDev"},"image":{"@id":"https:\/\/webdesigndev.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/WebDesignDevBlog","https:\/\/x.com\/WebDesignDev"]},{"@type":"Person","@id":"https:\/\/webdesigndev.com\/#\/schema\/person\/d25d955ee0786bc10f0cda0dca381194","name":"Iggy","description":"Iggy is an entrepreneur, blogger, and designer who loves experimenting with new web design techniques, collating creative website designs, and writing about the latest design fonts, themes, plugins, inspiration, and more. You can follow him on Twitter","sameAs":["https:\/\/www.facebook.com\/pages\/WebDesignDev\/109134615846988","https:\/\/x.com\/https:\/\/twitter.com\/WebDesignDev"]}]}},"_links":{"self":[{"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/posts\/22088"}],"collection":[{"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/users\/30"}],"replies":[{"embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/comments?post=22088"}],"version-history":[{"count":0,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/posts\/22088\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/media\/22182"}],"wp:attachment":[{"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/media?parent=22088"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/categories?post=22088"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/tags?post=22088"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}