{"id":1856,"date":"2014-12-19T05:53:50","date_gmt":"2014-12-19T05:53:50","guid":{"rendered":"http:\/\/www.vishmax.com\/en\/?p=1856"},"modified":"2014-12-27T12:53:56","modified_gmt":"2014-12-27T12:53:56","slug":"beautiful-css-flat-ui-buttons-for-free-download","status":"publish","type":"post","link":"http:\/\/www.vishmax.com\/en\/labs\/beautiful-css-flat-ui-buttons-for-free-download\/","title":{"rendered":"Beautiful CSS flat UI buttons for free download"},"content":{"rendered":"<p>Here is a set of beautiful flat UI buttons which is build on pure Cascading Style Sheets (CSS). Below you can find the code used for building this buttons and at the bottom there is link for viewing working example of the code.<\/p>\n<h2>CSS<\/h2>\n<pre lang=\"css\">\r\n\r\n.buttons-holder {\r\n  padding-top: 20px;\r\n  text-align: center;\r\n}\r\n.btn {\r\n\tborder-radius: 5px;\r\n\tpadding: 10px 25px;\r\n\tfont-size: 18px;\r\n\ttext-decoration: none;\r\n\tmargin: 10px;\r\n\tcolor: #fff;\r\n\tposition: relative;\r\n\tdisplay: inline-block;\r\n}\r\n.btn:active {\r\n\ttransform: translate(0px, 5px);\r\n\t-webkit-transform: translate(0px, 5px);\r\n\tbox-shadow: 0px 1px 0px 0px;\r\n}\r\n.blue {\r\n\tbackground-color: #2a7fb8;\r\n\tbox-shadow: 0px 2px 0px 0px #226897;\r\n}\r\n.blue:hover {\r\n\tbackground-color: #359de3;\r\n}\r\n.light-blue {\r\n\tbackground-color: #5aa7f5;\r\n\tbox-shadow: 0px 2px 0px 0px #4e94db;\r\n}\r\n.light-blue:hover {\r\n\tbackground-color: #82bdf9;\r\n}\r\n.green {\r\n\tbackground-color: #2ecc71;\r\n\tbox-shadow: 0px 2px 0px 0px #15B358;\r\n}\r\n.green:hover {\r\n\tbackground-color: #48E68B;\r\n}\r\n.red {\r\n\tbackground-color: #f43230;\r\n\tbox-shadow: 0px 2px 0px 0px #ca4538;\r\n}\r\n.red:hover {\r\n  background-color: #fe6051;\r\n}\r\n.purple {\r\n\tbackground-color: #9b59b6;\r\n\tbox-shadow: 0px 2px 0px 0px #82409D;\r\n}\r\n.purple:hover {\r\n\tbackground-color: #B573D0;\r\n}\r\n.orange {\r\n\tbackground-color: #ff9600;\r\n\tbox-shadow: 0px 2px 0px 0px #eb8b03;\r\n}\r\n.orange:hover {\r\n\tbackground-color: #ffa729;\r\n}\r\n.yellow {\r\n\tbackground-color: #fddc00;\r\n\tbox-shadow: 0px 2px 0px 0px #ecce03;\r\n}\r\n.yellow:hover {\r\n\tbackground-color: #feed2f;\r\n}\r\n.black {\r\n\tbackground-color: #474646;\r\n\tbox-shadow: 0px 2px 0px 0px #2e2d2d;\r\n}\r\n.black:hover {\r\n\tbackground-color: #616060;\r\n}\r\n.button-small {\r\n\tpadding: 5px 15px;\r\n\tfont-size: 12px;\r\n}\r\n.button-large {\r\n\tpadding: 10px 25px;\r\n\tfont-size: 22px;\r\n}\r\n\r\n<\/pre>\n<h2>HTML<\/h2>\n<pre lang=\"html\">\r\n\r\n\t\t<!-- buttons set 1 -->\r\n\t\t<div class=\"buttons-holder\">\r\n\t\t<h2> Buttons Small<\/h2>\r\n\t\t\t<a href=\"#\" class=\"btn blue button-small\">Blue Button<\/a>\r\n\t\t\t<a href=\"#\" class=\"btn light-blue button-small\">Light Blue Button<\/a>\r\n\t\t\t<a href=\"#\" class=\"btn green button-small\">Green Button<\/a>\r\n\t\t\t<a href=\"#\" class=\"btn red button-small\">Dark Red Button<\/a>\r\n\t\t\t<a href=\"#\" class=\"btn purple button-small\">Purple Button<\/a>\r\n\t\t\t<a href=\"#\" class=\"btn orange button-small\">Orange Button<\/a>\r\n\t\t\t<a href=\"#\" class=\"btn yellow button-small\">Yellow Button<\/a>\r\n\t\t\t<a href=\"#\" class=\"btn black button-small\">Black Button<\/a>\r\n\t\t<\/div>\t\t\r\n\r\n\t\t<!-- buttons set 2 -->\r\n\t\t<div class=\"buttons-holder\">\r\n\t\t<h2> Buttons Medium<\/h2>\r\n\t\t\t<a href=\"#\" class=\"btn blue\">Blue Button<\/a>\r\n\t\t\t<a href=\"#\" class=\"btn light-blue\">Light Blue Button<\/a>\r\n\t\t\t<a href=\"#\" class=\"btn green\">Green Button<\/a>\r\n\t\t\t<a href=\"#\" class=\"btn red\">Dark Red Button<\/a>\r\n\t\t\t<a href=\"#\" class=\"btn purple\">Purple Button<\/a>\r\n\t\t\t<a href=\"#\" class=\"btn orange\">Orange Button<\/a>\r\n\t\t\t<a href=\"#\" class=\"btn yellow\">Yellow Button<\/a>\r\n\t\t\t<a href=\"#\" class=\"btn black\">Black Button<\/a>\r\n\t\t<\/div>\t\t\r\n\r\n\t\t<!-- buttons set 3 -->\r\n\t\t<div class=\"buttons-holder\">\r\n\t\t<h2> Buttons Large<\/h2>\r\n\t\t\t<a href=\"#\" class=\"btn blue button-large\">Blue Button<\/a>\r\n\t\t\t<a href=\"#\" class=\"btn light-blue button-large\">Light Blue Button<\/a>\r\n\t\t\t<a href=\"#\" class=\"btn green button-large\">Green Button<\/a>\r\n\t\t\t<a href=\"#\" class=\"btn red button-large\">Dark Red Button<\/a>\r\n\t\t\t<a href=\"#\" class=\"btn purple button-large\">Purple Button<\/a>\r\n\t\t\t<a href=\"#\" class=\"btn orange button-large\">Orange Button<\/a>\r\n\t\t\t<a href=\"#\" class=\"btn yellow button-large\">Yellow Button<\/a>\r\n\t\t\t<a href=\"#\" class=\"btn black button-large\">Black Button<\/a>\r\n\t\t<\/div>\t\t\r\n\r\n\r\n<\/pre>\n<p><a class=\"external-download\" href=\"http:\/\/www.vishmax.com\/demos\/css3-butons.html\" target=\"_blank\">Demo<\/a> <a class=\"external-download\" href=\"http:\/\/www.vishmax.com\/demos\/css3-butons.zip\" target=\"_blank\">Download<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here is a set of beautiful flat UI buttons which is build on pure Cascading Style Sheets (CSS). Below you can find the code used for building this buttons and at the bottom there is link for viewing working example of the code. CSS .buttons-holder { padding-top: 20px; text-align: center; } .btn { border-radius: 5px; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[44],"tags":[67,101,96],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.2.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Beautiful CSS flat UI buttons for free download - Vishmax.com<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/www.vishmax.com\/en\/labs\/beautiful-css-flat-ui-buttons-for-free-download\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Beautiful CSS flat UI buttons for free download - Vishmax.com\" \/>\n<meta property=\"og:description\" content=\"Here is a set of beautiful flat UI buttons which is build on pure Cascading Style Sheets (CSS). Below you can find the code used for building this buttons and at the bottom there is link for viewing working example of the code. CSS .buttons-holder { padding-top: 20px; text-align: center; } .btn { border-radius: 5px; [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"http:\/\/www.vishmax.com\/en\/labs\/beautiful-css-flat-ui-buttons-for-free-download\/\" \/>\n<meta property=\"og:site_name\" content=\"Vishmax.com\" \/>\n<meta property=\"article:published_time\" content=\"2014-12-19T05:53:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-12-27T12:53:56+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\/\/www.vishmax.com\/en\/labs\/beautiful-css-flat-ui-buttons-for-free-download\/#article\",\"isPartOf\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/labs\/beautiful-css-flat-ui-buttons-for-free-download\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93\"},\"headline\":\"Beautiful CSS flat UI buttons for free download\",\"datePublished\":\"2014-12-19T05:53:50+00:00\",\"dateModified\":\"2014-12-27T12:53:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/labs\/beautiful-css-flat-ui-buttons-for-free-download\/\"},\"wordCount\":55,\"publisher\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#organization\"},\"keywords\":[\"CSS\",\"Examples\",\"Freebies\"],\"articleSection\":[\"Labs\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/www.vishmax.com\/en\/labs\/beautiful-css-flat-ui-buttons-for-free-download\/\",\"url\":\"http:\/\/www.vishmax.com\/en\/labs\/beautiful-css-flat-ui-buttons-for-free-download\/\",\"name\":\"Beautiful CSS flat UI buttons for free download - Vishmax.com\",\"isPartOf\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#website\"},\"datePublished\":\"2014-12-19T05:53:50+00:00\",\"dateModified\":\"2014-12-27T12:53:56+00:00\",\"breadcrumb\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/labs\/beautiful-css-flat-ui-buttons-for-free-download\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/www.vishmax.com\/en\/labs\/beautiful-css-flat-ui-buttons-for-free-download\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/www.vishmax.com\/en\/labs\/beautiful-css-flat-ui-buttons-for-free-download\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/www.vishmax.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Beautiful CSS flat UI buttons for free download\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#website\",\"url\":\"http:\/\/www.vishmax.com\/en\/\",\"name\":\"Vishmax.com\",\"description\":\"Software Company in Calicut for Web Design and eCommerce\",\"publisher\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/www.vishmax.com\/en\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#organization\",\"name\":\"Vishmax.com\",\"url\":\"http:\/\/www.vishmax.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png\",\"contentUrl\":\"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png\",\"width\":150,\"height\":50,\"caption\":\"Vishmax.com\"},\"image\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/image\/\",\"url\":\"http:\/\/2.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g\",\"contentUrl\":\"http:\/\/2.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g\",\"caption\":\"admin\"},\"url\":\"http:\/\/www.vishmax.com\/en\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Beautiful CSS flat UI buttons for free download - Vishmax.com","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":"http:\/\/www.vishmax.com\/en\/labs\/beautiful-css-flat-ui-buttons-for-free-download\/","og_locale":"en_US","og_type":"article","og_title":"Beautiful CSS flat UI buttons for free download - Vishmax.com","og_description":"Here is a set of beautiful flat UI buttons which is build on pure Cascading Style Sheets (CSS). Below you can find the code used for building this buttons and at the bottom there is link for viewing working example of the code. CSS .buttons-holder { padding-top: 20px; text-align: center; } .btn { border-radius: 5px; [&hellip;]","og_url":"http:\/\/www.vishmax.com\/en\/labs\/beautiful-css-flat-ui-buttons-for-free-download\/","og_site_name":"Vishmax.com","article_published_time":"2014-12-19T05:53:50+00:00","article_modified_time":"2014-12-27T12:53:56+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/www.vishmax.com\/en\/labs\/beautiful-css-flat-ui-buttons-for-free-download\/#article","isPartOf":{"@id":"http:\/\/www.vishmax.com\/en\/labs\/beautiful-css-flat-ui-buttons-for-free-download\/"},"author":{"name":"admin","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93"},"headline":"Beautiful CSS flat UI buttons for free download","datePublished":"2014-12-19T05:53:50+00:00","dateModified":"2014-12-27T12:53:56+00:00","mainEntityOfPage":{"@id":"http:\/\/www.vishmax.com\/en\/labs\/beautiful-css-flat-ui-buttons-for-free-download\/"},"wordCount":55,"publisher":{"@id":"http:\/\/www.vishmax.com\/en\/#organization"},"keywords":["CSS","Examples","Freebies"],"articleSection":["Labs"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/www.vishmax.com\/en\/labs\/beautiful-css-flat-ui-buttons-for-free-download\/","url":"http:\/\/www.vishmax.com\/en\/labs\/beautiful-css-flat-ui-buttons-for-free-download\/","name":"Beautiful CSS flat UI buttons for free download - Vishmax.com","isPartOf":{"@id":"http:\/\/www.vishmax.com\/en\/#website"},"datePublished":"2014-12-19T05:53:50+00:00","dateModified":"2014-12-27T12:53:56+00:00","breadcrumb":{"@id":"http:\/\/www.vishmax.com\/en\/labs\/beautiful-css-flat-ui-buttons-for-free-download\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/www.vishmax.com\/en\/labs\/beautiful-css-flat-ui-buttons-for-free-download\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/www.vishmax.com\/en\/labs\/beautiful-css-flat-ui-buttons-for-free-download\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/www.vishmax.com\/en\/"},{"@type":"ListItem","position":2,"name":"Beautiful CSS flat UI buttons for free download"}]},{"@type":"WebSite","@id":"http:\/\/www.vishmax.com\/en\/#website","url":"http:\/\/www.vishmax.com\/en\/","name":"Vishmax.com","description":"Software Company in Calicut for Web Design and eCommerce","publisher":{"@id":"http:\/\/www.vishmax.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/www.vishmax.com\/en\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/www.vishmax.com\/en\/#organization","name":"Vishmax.com","url":"http:\/\/www.vishmax.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png","contentUrl":"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png","width":150,"height":50,"caption":"Vishmax.com"},"image":{"@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/image\/","url":"http:\/\/2.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g","contentUrl":"http:\/\/2.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g","caption":"admin"},"url":"http:\/\/www.vishmax.com\/en\/author\/admin\/"}]}},"_links":{"self":[{"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/posts\/1856"}],"collection":[{"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/comments?post=1856"}],"version-history":[{"count":0,"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/posts\/1856\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/media?parent=1856"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/categories?post=1856"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/tags?post=1856"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}