{"id":2604,"date":"2015-05-10T08:50:32","date_gmt":"2015-05-10T08:50:32","guid":{"rendered":"http:\/\/www.vishmax.com\/en\/?p=2604"},"modified":"2015-05-10T08:50:32","modified_gmt":"2015-05-10T08:50:32","slug":"animated-checkbox-using-css3-tutorial-with-live-demo","status":"publish","type":"post","link":"https:\/\/www.vishmax.com\/en\/labs\/animated-checkbox-using-css3-tutorial-with-live-demo\/","title":{"rendered":"Animated checkbox using Css3 tutorial with live demo"},"content":{"rendered":"<p>As the web technology is getting advanced the websites are also becoming more advanced. In this post we are explaining about checkbox which is used widely in html forms. This is an animated check box which can use to make html form more attractive. Below is the full code for this tutorial and you can also find a live demo option on bottom of this tutorial.<\/p>\n<h2>Animated checkbox CSS<\/h2>\n<pre lang=\"css\">\r\n\t.wrapper{\r\n\t\twidth:80%;\r\n\t\theight:auto;\r\n\t\tfloat:left;\r\n\t\tmargin: 0 0 0 10%;\r\n\t}\r\n\tul {\r\n\t  \tlist-style: none;\r\n\t}\r\n\tul li {\r\n\t \t padding: 0.4em\r\n\t}\r\n\tlabel.styled {\r\n\t\twidth: 80%;\r\n\t\ttext-align: center;\r\n\t\tpadding: 0.6em 2em;\r\n\t\tcolor: #fff;\r\n\t\ttransition: all 0.4s ease;\r\n\t\tposition: relative;\r\n\t\toverflow: hidden;\r\n\t\tcursor: pointer;\r\n\t\tbackground-color: #0e2c8f;\r\n\t\tdisplay: block;\r\n\t}\r\n\tlabel.styled:before {\r\n\t\twidth:40px;\r\n\t\theight:100%; \r\n\t\tcontent: '\u2713';\r\n\t\tline-height: 40px;\r\n\t\tfont-size: 25px;\r\n\t\tcolor: #000;\r\n\t\tbackground-color: #fee405;\r\n\t\tposition: absolute;\r\n\t\ttop:0;\r\n\t\tleft:100%;\r\n\t\ttransition: all 0.4s ease;\r\n\t\topacity: 0;\r\n\t\tborder-right: 1px solid #fff;\r\n\t}\r\n\tlabel.styled:hover:before {\r\n\t\tleft: 98%;\r\n\t}\r\n\tinput.styled {\r\n\t\tdisplay: none;\r\n\t}\r\n\t\/* Checked *\/\r\n\tinput.styled:checked ~ label.styled {\r\n\t\tbackground-color: #1b2b60;\r\n\t\ttransform:scale(1.1); \r\n\t}\r\n\tinput.styled:checked ~ label.styled:before {\r\n\t\tleft:0px;\r\n\t\topacity: 1;\r\n\t}\r\n\r\n<\/pre>\n<h2>Animated checkbox Html<\/h2>\n<pre lang=\"html\">\r\n\r\n\t\t<!-- Animated Check Box -->\r\n\t\t<div class=\"wrapper\">\r\n\t\t\t\t<ul>\r\n\t\t\t\t  <li>\r\n\t\t\t\t\t<input type=\"checkbox\" class=\"styled\" id=\"b_1\">\r\n\t\t\t\t\t<label class=\"styled\" for=\"b_1\">Check 1<\/label>\r\n\t\t\t\t  <\/li>\r\n\t\t\t\t  \r\n\t\t\t\t  <li>\r\n\t\t\t\t\t<input type=\"checkbox\" class=\"styled\" id=\"b_2\">\r\n\t\t\t\t\t<label class=\"styled\" for=\"b_2\">Check 2<\/label>\r\n\t\t\t\t  <\/li>\r\n\t\t\t\t  \r\n\t\t\t\t  <li>\r\n\t\t\t\t\t<input type=\"checkbox\" class=\"styled\" id=\"b_3\">\r\n\t\t\t\t\t<label class=\"styled\" for=\"b_3\">Check 3<\/label>\r\n\t\t\t\t  <\/li>\r\n\r\n\t\t\t\t  <li>\r\n\t\t\t\t\t<input type=\"checkbox\" class=\"styled\" id=\"b_4\">\r\n\t\t\t\t\t<label class=\"styled\" for=\"b_4\">Check 4<\/label>\r\n\t\t\t\t  <\/li>\r\n\t\t\t\t  \r\n\t\t\t\t  <li>\r\n\t\t\t\t\t<input type=\"checkbox\" class=\"styled\" id=\"b_5\">\r\n\t\t\t\t\t<label class=\"styled\" for=\"b_5\">Check 5<\/label>\r\n\t\t\t\t  <\/li>\r\n\t\t\t\t<\/ul>\r\n\t\t<\/div>\r\n\r\n\t\t<!-- \/Animated Check Box -->\r\n\r\n<\/pre>\n<p><a class=\"external-download\" href=\"http:\/\/vishmax.com\/demos\/css-animated-checkbox.html\" target=\"_blank\">Live Demo<\/a> <\/p>\n","protected":false},"excerpt":{"rendered":"<p>As the web technology is getting advanced the websites are also becoming more advanced. In this post we are explaining about checkbox which is used widely in html forms. This is an animated check box which can use to make html form more attractive. Below is the full code for this tutorial and you can [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2605,"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>Animated checkbox using Css3 tutorial with live demo - 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=\"https:\/\/www.vishmax.com\/en\/labs\/animated-checkbox-using-css3-tutorial-with-live-demo\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Animated checkbox using Css3 tutorial with live demo - Vishmax.com\" \/>\n<meta property=\"og:description\" content=\"As the web technology is getting advanced the websites are also becoming more advanced. In this post we are explaining about checkbox which is used widely in html forms. This is an animated check box which can use to make html form more attractive. Below is the full code for this tutorial and you can [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vishmax.com\/en\/labs\/animated-checkbox-using-css3-tutorial-with-live-demo\/\" \/>\n<meta property=\"og:site_name\" content=\"Vishmax.com\" \/>\n<meta property=\"article:published_time\" content=\"2015-05-10T08:50:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2015\/05\/css3-checkbox-400x230.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"400\" \/>\n\t<meta property=\"og:image:height\" content=\"230\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\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\":\"https:\/\/www.vishmax.com\/en\/labs\/animated-checkbox-using-css3-tutorial-with-live-demo\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.vishmax.com\/en\/labs\/animated-checkbox-using-css3-tutorial-with-live-demo\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93\"},\"headline\":\"Animated checkbox using Css3 tutorial with live demo\",\"datePublished\":\"2015-05-10T08:50:32+00:00\",\"dateModified\":\"2015-05-10T08:50:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.vishmax.com\/en\/labs\/animated-checkbox-using-css3-tutorial-with-live-demo\/\"},\"wordCount\":82,\"publisher\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#organization\"},\"keywords\":[\"CSS\",\"Examples\",\"Web Design Tips\"],\"articleSection\":[\"Labs\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vishmax.com\/en\/labs\/animated-checkbox-using-css3-tutorial-with-live-demo\/\",\"url\":\"https:\/\/www.vishmax.com\/en\/labs\/animated-checkbox-using-css3-tutorial-with-live-demo\/\",\"name\":\"Animated checkbox using Css3 tutorial with live demo - Vishmax.com\",\"isPartOf\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#website\"},\"datePublished\":\"2015-05-10T08:50:32+00:00\",\"dateModified\":\"2015-05-10T08:50:32+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vishmax.com\/en\/labs\/animated-checkbox-using-css3-tutorial-with-live-demo\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vishmax.com\/en\/labs\/animated-checkbox-using-css3-tutorial-with-live-demo\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vishmax.com\/en\/labs\/animated-checkbox-using-css3-tutorial-with-live-demo\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/www.vishmax.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Animated checkbox using Css3 tutorial with live demo\"}]},{\"@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\":\"https:\/\/secure.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g\",\"caption\":\"admin\"},\"url\":\"https:\/\/www.vishmax.com\/en\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Animated checkbox using Css3 tutorial with live demo - 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":"https:\/\/www.vishmax.com\/en\/labs\/animated-checkbox-using-css3-tutorial-with-live-demo\/","og_locale":"en_US","og_type":"article","og_title":"Animated checkbox using Css3 tutorial with live demo - Vishmax.com","og_description":"As the web technology is getting advanced the websites are also becoming more advanced. In this post we are explaining about checkbox which is used widely in html forms. This is an animated check box which can use to make html form more attractive. Below is the full code for this tutorial and you can [&hellip;]","og_url":"https:\/\/www.vishmax.com\/en\/labs\/animated-checkbox-using-css3-tutorial-with-live-demo\/","og_site_name":"Vishmax.com","article_published_time":"2015-05-10T08:50:32+00:00","og_image":[{"width":400,"height":230,"url":"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2015\/05\/css3-checkbox-400x230.jpg","type":"image\/jpeg"}],"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":"https:\/\/www.vishmax.com\/en\/labs\/animated-checkbox-using-css3-tutorial-with-live-demo\/#article","isPartOf":{"@id":"https:\/\/www.vishmax.com\/en\/labs\/animated-checkbox-using-css3-tutorial-with-live-demo\/"},"author":{"name":"admin","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93"},"headline":"Animated checkbox using Css3 tutorial with live demo","datePublished":"2015-05-10T08:50:32+00:00","dateModified":"2015-05-10T08:50:32+00:00","mainEntityOfPage":{"@id":"https:\/\/www.vishmax.com\/en\/labs\/animated-checkbox-using-css3-tutorial-with-live-demo\/"},"wordCount":82,"publisher":{"@id":"http:\/\/www.vishmax.com\/en\/#organization"},"keywords":["CSS","Examples","Web Design Tips"],"articleSection":["Labs"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.vishmax.com\/en\/labs\/animated-checkbox-using-css3-tutorial-with-live-demo\/","url":"https:\/\/www.vishmax.com\/en\/labs\/animated-checkbox-using-css3-tutorial-with-live-demo\/","name":"Animated checkbox using Css3 tutorial with live demo - Vishmax.com","isPartOf":{"@id":"http:\/\/www.vishmax.com\/en\/#website"},"datePublished":"2015-05-10T08:50:32+00:00","dateModified":"2015-05-10T08:50:32+00:00","breadcrumb":{"@id":"https:\/\/www.vishmax.com\/en\/labs\/animated-checkbox-using-css3-tutorial-with-live-demo\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vishmax.com\/en\/labs\/animated-checkbox-using-css3-tutorial-with-live-demo\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vishmax.com\/en\/labs\/animated-checkbox-using-css3-tutorial-with-live-demo\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/www.vishmax.com\/en\/"},{"@type":"ListItem","position":2,"name":"Animated checkbox using Css3 tutorial with live demo"}]},{"@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":"https:\/\/secure.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g","caption":"admin"},"url":"https:\/\/www.vishmax.com\/en\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/posts\/2604"}],"collection":[{"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/comments?post=2604"}],"version-history":[{"count":0,"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/posts\/2604\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/media\/2605"}],"wp:attachment":[{"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/media?parent=2604"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/categories?post=2604"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/tags?post=2604"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}