{"id":1899,"date":"2014-12-22T06:20:31","date_gmt":"2014-12-22T06:20:31","guid":{"rendered":"http:\/\/www.vishmax.com\/en\/?p=1899"},"modified":"2014-12-27T12:52:17","modified_gmt":"2014-12-27T12:52:17","slug":"how-to-make-animated-buttons-using-css3","status":"publish","type":"post","link":"http:\/\/www.vishmax.com\/en\/labs\/how-to-make-animated-buttons-using-css3\/","title":{"rendered":"How to make animated buttons using CSS3"},"content":{"rendered":"<p>Here is a nice code for creating modern buttons using CSS3, the latest version of the Cascading Style Sheets (CSS) specification. Below you can found both HTML and CSS code and also option for viewing the online demo. Besides that you can download the complete code as a zip file by using the download button at bottom of post.<\/p>\n<h2>CSS<\/h2>\n<pre lang=\"css\">\r\n\r\n\t\/* buttons-wrapper *\/\r\n\t.button-wrapper{\r\n\t\twidth:30%;\r\n\t\tmargin: 0 auto;\r\n\t\tpadding: 20px 0;\r\n\t}\r\n\t\/* buttons *\/\r\n\t.bttn-animated{\r\n\t\tfloat:left;\r\n\t\tposition:relative;\r\n\t\tpadding-left:90px;\r\n\t\tpadding-right:105px;\r\n\t\theight:80px;\r\n\t\tdisplay:inline-block;\r\n\t\tborder-radius:2px;\r\n\t\tclear:both;\r\n\t\tmargin:10px 0px;\r\n\t\toverflow:hidden;\r\n\t\ttransition:box-shadow 0.3s ease-in-out;\r\n\t}\r\n\t.bttn-animated img{\r\n\t\tposition:absolute;\r\n\t\tleft:15px;\r\n\t\ttop:8px;\r\n\t\tborder:none;\r\n\t\ttransition:all 0.3s ease-in-out;\r\n\t}\r\n\t.bttn-animated .bttn-animated-slide-text{\r\n\t\tposition:absolute;\r\n\t\tfont-size:36px;\r\n\t\ttop:8px;\r\n\t\tleft:18px;\r\n\t\tcolor: #FFCC00;\r\n\t\topacity:0;\r\n\t\ttransition:opacity 0.2s ease-in-out;\r\n\t}\r\n\t.bttn-animated-text{\r\n\t\tpadding-top:10px;\r\n\t\tdisplay:block;\r\n\t\tfont-size:20px;\r\n\t\tcolor:#fff;\r\n\t\tfont-weight:400;\r\n\t\ttext-shadow:0px -1px 1px #222;\r\n\t}\r\n\t.bttn-animated-text small{\r\n\t\tdisplay:block;\r\n\t\tfont-size:11px;\r\n\t\tletter-spacing:1px;\r\n\t}\r\n\t.bttn-animated-txt-right{\r\n\t\tposition:absolute;\r\n\t\tright:0px;\r\n\t\ttop:0px;\r\n\t\theight:100%;\r\n\t\twidth:80px;\r\n\t\tborder-left:1px solid #5e2277;\r\n\t}\r\n\t.bttn-animated-txt-right span{\r\n\t\twidth:38px;\r\n\t\theight:38px;\r\n\t\topacity:0.7;\r\n\t\tborder-radius:2px;\r\n\t\tposition:absolute;\r\n\t\tleft:45%;\r\n\t\ttop:55%;\r\n\t\tcolor: #fff;\r\n\t\tfont-size:18px;\r\n\t\tmargin:-20px 0px 0px -20px;\r\n\t\ttransition:all 0.3s ease-in-out;\r\n\t}\r\n\t.bttn-animated:hover img{\r\n\t\ttransform:scale(10);\r\n\t\topacity:0;\r\n\t}\r\n\t.bttn-animated:hover .bttn-animated-slide-text,\r\n\t.bttn-animated:hover .bttn-animated-txt-right span{\r\n\t\topacity:1;\r\n\t}\r\n\t.bttn-animated:active{\r\n\t\tposition:relative;\r\n\t\ttop:1px;\r\n\t\tbackground:#ba55e3;\r\n\t\tborder-color:#9b59b6;\r\n\t}\r\n\t.bttn-animated:active .bttn-animated-txt-right span{\r\n\t\ttransform:scale(1.4);\r\n\t}\r\n\t.violet{\r\n\t\tbackground:#9b59b6;\r\n\t\tborder:1px solid #5b2870;\r\n\t}\r\n\t.blue{\r\n\t\tbackground:#2a7fb8;\r\n\t\tborder:1px solid #225e86;\r\n\t}\r\n\t.violet-light{\r\n\t\tbackground:#666699;\r\n\t\tborder:1px solid #4a4a76;\r\n\t}\r\n\t.black{\r\n\t\tbackground:#5aa7f5;\r\n\t\tborder:1px solid #3c92e9;\r\n\t}\r\n\r\n<\/pre>\n<h2>HTML<\/h2>\n<pre lang=\"html\">\r\n\r\n\t\t<!-- buttons -->\r\n\t\t\t\t<div class=\"button-wrapper\">\r\n\t\t\t\t\r\n\t\t\t\t\t<a href=\"#\" class=\"bttn-animated violet\">\r\n\t\t\t\t\t\t<span class=\"bttn-animated-slide-text\">+<\/span>\r\n\t\t\t\t\t\t<img decoding=\"async\" src=\"images\/wpicon-01.png\" alt=\"Icons\" \/>\r\n\t\t\t\t\t\t<span class=\"bttn-animated-text\"><small>WP Theme for<\/small> Restaurant<\/span> \r\n\t\t\t\t\t\t<span class=\"bttn-animated-txt-right\"><span>more<\/span><\/span>\r\n\t\t\t\t\t<\/a>\r\n\t\t\t\t\t<a href=\"#\" class=\"bttn-animated blue\">\r\n\t\t\t\t\t\t<span class=\"bttn-animated-slide-text\">+<\/span>\r\n\t\t\t\t\t\t<img decoding=\"async\" src=\"images\/wpicon-01.png\" alt=\"Icons\" \/>\r\n\t\t\t\t\t\t<span class=\"bttn-animated-text\"><small>WP Theme for<\/small> Restaurant<\/span> \r\n\t\t\t\t\t\t<span class=\"bttn-animated-txt-right\"><span>more<\/span><\/span>\r\n\t\t\t\t\t<\/a>\r\n\t\t\t\t\t<a href=\"#\" class=\"bttn-animated violet-light\">\r\n\t\t\t\t\t\t<span class=\"bttn-animated-slide-text\">+<\/span>\r\n\t\t\t\t\t\t<img decoding=\"async\" src=\"images\/wpicon-01.png\" alt=\"Icons\" \/>\r\n\t\t\t\t\t\t<span class=\"bttn-animated-text\"><small>WP Theme for<\/small> Restaurant<\/span> \r\n\t\t\t\t\t\t<span class=\"bttn-animated-txt-right\"><span>more<\/span><\/span>\r\n\t\t\t\t\t<\/a>\r\n\t\t\t\t\t<a href=\"#\" class=\"bttn-animated black\">\r\n\t\t\t\t\t\t<span class=\"bttn-animated-slide-text\">+<\/span>\r\n\t\t\t\t\t\t<img decoding=\"async\" src=\"images\/wpicon-01.png\" alt=\"Icons\" \/>\r\n\t\t\t\t\t\t<span class=\"bttn-animated-text\"><small>WP Theme for<\/small> Restaurant<\/span> \r\n\t\t\t\t\t\t<span class=\"bttn-animated-txt-right\"><span>more<\/span><\/span>\r\n\t\t\t\t\t<\/a>\r\n\r\n\t\t\t\t\t\r\n\t\t\t\t<\/div>\r\n\r\n<\/pre>\n<p><a class=\"external-download\" href=\"http:\/\/vishmax.com\/demos\/css3-animated-butons.html\" target=\"_blank\">Live Demo<\/a> <a class=\"external-download\" href=\"http:\/\/vishmax.com\/demos\/css3-animated-butons.zip\" target=\"_blank\">Download<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here is a nice code for creating modern buttons using CSS3, the latest version of the Cascading Style Sheets (CSS) specification. Below you can found both HTML and CSS code and also option for viewing the online demo. Besides that you can download the complete code as a zip file by using the download button [&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,94],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.2.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to make animated buttons using CSS3 - 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\/how-to-make-animated-buttons-using-css3\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to make animated buttons using CSS3 - Vishmax.com\" \/>\n<meta property=\"og:description\" content=\"Here is a nice code for creating modern buttons using CSS3, the latest version of the Cascading Style Sheets (CSS) specification. Below you can found both HTML and CSS code and also option for viewing the online demo. Besides that you can download the complete code as a zip file by using the download button [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"http:\/\/www.vishmax.com\/en\/labs\/how-to-make-animated-buttons-using-css3\/\" \/>\n<meta property=\"og:site_name\" content=\"Vishmax.com\" \/>\n<meta property=\"article:published_time\" content=\"2014-12-22T06:20:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-12-27T12:52:17+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\/how-to-make-animated-buttons-using-css3\/#article\",\"isPartOf\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/labs\/how-to-make-animated-buttons-using-css3\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93\"},\"headline\":\"How to make animated buttons using CSS3\",\"datePublished\":\"2014-12-22T06:20:31+00:00\",\"dateModified\":\"2014-12-27T12:52:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/labs\/how-to-make-animated-buttons-using-css3\/\"},\"wordCount\":71,\"publisher\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#organization\"},\"keywords\":[\"CSS\",\"Examples\",\"Web Design Tips\"],\"articleSection\":[\"Labs\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/www.vishmax.com\/en\/labs\/how-to-make-animated-buttons-using-css3\/\",\"url\":\"http:\/\/www.vishmax.com\/en\/labs\/how-to-make-animated-buttons-using-css3\/\",\"name\":\"How to make animated buttons using CSS3 - Vishmax.com\",\"isPartOf\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#website\"},\"datePublished\":\"2014-12-22T06:20:31+00:00\",\"dateModified\":\"2014-12-27T12:52:17+00:00\",\"breadcrumb\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/labs\/how-to-make-animated-buttons-using-css3\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/www.vishmax.com\/en\/labs\/how-to-make-animated-buttons-using-css3\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/www.vishmax.com\/en\/labs\/how-to-make-animated-buttons-using-css3\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/www.vishmax.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to make animated buttons using CSS3\"}]},{\"@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":"How to make animated buttons using CSS3 - 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\/how-to-make-animated-buttons-using-css3\/","og_locale":"en_US","og_type":"article","og_title":"How to make animated buttons using CSS3 - Vishmax.com","og_description":"Here is a nice code for creating modern buttons using CSS3, the latest version of the Cascading Style Sheets (CSS) specification. Below you can found both HTML and CSS code and also option for viewing the online demo. Besides that you can download the complete code as a zip file by using the download button [&hellip;]","og_url":"http:\/\/www.vishmax.com\/en\/labs\/how-to-make-animated-buttons-using-css3\/","og_site_name":"Vishmax.com","article_published_time":"2014-12-22T06:20:31+00:00","article_modified_time":"2014-12-27T12:52:17+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\/how-to-make-animated-buttons-using-css3\/#article","isPartOf":{"@id":"http:\/\/www.vishmax.com\/en\/labs\/how-to-make-animated-buttons-using-css3\/"},"author":{"name":"admin","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93"},"headline":"How to make animated buttons using CSS3","datePublished":"2014-12-22T06:20:31+00:00","dateModified":"2014-12-27T12:52:17+00:00","mainEntityOfPage":{"@id":"http:\/\/www.vishmax.com\/en\/labs\/how-to-make-animated-buttons-using-css3\/"},"wordCount":71,"publisher":{"@id":"http:\/\/www.vishmax.com\/en\/#organization"},"keywords":["CSS","Examples","Web Design Tips"],"articleSection":["Labs"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/www.vishmax.com\/en\/labs\/how-to-make-animated-buttons-using-css3\/","url":"http:\/\/www.vishmax.com\/en\/labs\/how-to-make-animated-buttons-using-css3\/","name":"How to make animated buttons using CSS3 - Vishmax.com","isPartOf":{"@id":"http:\/\/www.vishmax.com\/en\/#website"},"datePublished":"2014-12-22T06:20:31+00:00","dateModified":"2014-12-27T12:52:17+00:00","breadcrumb":{"@id":"http:\/\/www.vishmax.com\/en\/labs\/how-to-make-animated-buttons-using-css3\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/www.vishmax.com\/en\/labs\/how-to-make-animated-buttons-using-css3\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/www.vishmax.com\/en\/labs\/how-to-make-animated-buttons-using-css3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/www.vishmax.com\/en\/"},{"@type":"ListItem","position":2,"name":"How to make animated buttons using CSS3"}]},{"@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\/1899"}],"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=1899"}],"version-history":[{"count":0,"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/posts\/1899\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/media?parent=1899"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/categories?post=1899"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/tags?post=1899"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}