{"id":205,"date":"2015-07-23T04:48:35","date_gmt":"2015-07-23T04:48:35","guid":{"rendered":"http:\/\/codemyui.com\/pure-css-checkbox-toggle-animation\/"},"modified":"2018-05-17T12:59:11","modified_gmt":"2018-05-17T02:59:11","slug":"pure-css-checkbox-toggle-animation","status":"publish","type":"post","link":"https:\/\/codemyui.com\/pure-css-checkbox-toggle-animation\/","title":{"rendered":"Pure CSS Checkbox Toggle Animation"},"content":{"rendered":"<p>Here are some amazing CSS animated checkbox toggle animation. Designed by <a href=\"https:\/\/twitter.com\/rafael_dsgn\" target=\"_blank\" rel=\"noopener\">Rafael Gonz\u00e1lez<\/a>.<\/p>\n<p><!--more--><\/p>\n<p>If you are having trouble with the pen, try the archived copy on <a href=\"https:\/\/gist.github.com\/CodeMyUI\/b3c525751fe173ad6ac7\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<p class='codepen'  data-height='855' data-theme-id='0' data-slug-hash='waEYye' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen Pure CSS Toggles by Rafael Gonz\u00e1lez (@rgg) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>Here are some amazing CSS animated checkbox toggle animation. Designed by Rafael Gonz\u00e1lez.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/pure-css-checkbox-toggle-animation\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":1045,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[1807,192416248,13170349,30305495,10970854],"class_list":["post-205","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-animation","tag-hover-animation","tag-input-field","tag-pure-css","tag-toggle-switch","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/pure-css-checkbox-toggle-animation.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":147,"url":"https:\/\/codemyui.com\/pure-css-toggle-with-cross-and-tick-animation\/","url_meta":{"origin":205,"position":0},"title":"Pure CSS toggle with cross and tick animation","author":"Hima Vincent","date":"October 7, 2015","format":false,"excerpt":"This is a beautiful toggle switch animation that morphs into a cross or tick with a smooth animation. Designed by Nikolay Talanov If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Pure CSS toggle with cross and tick animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/pure-css-toggle-with-cross-and-tick-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/pure-css-toggle-with-cross-and-tick-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/pure-css-toggle-with-cross-and-tick-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/pure-css-toggle-with-cross-and-tick-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":125,"url":"https:\/\/codemyui.com\/pure-css-gooey-toggle-switch\/","url_meta":{"origin":205,"position":1},"title":"Pure CSS Gooey Toggle Switch","author":"Hima Vincent","date":"October 21, 2015","format":false,"excerpt":"Toggle switch with nice gooey effect. Designed by\u00a0Vincent Durand. If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Pure CSS Gooey Toggle Switch","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/pure-css-gooey-toggle-switch.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/pure-css-gooey-toggle-switch.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/pure-css-gooey-toggle-switch.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/pure-css-gooey-toggle-switch.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":6078,"url":"https:\/\/codemyui.com\/realistic-css-switch\/","url_meta":{"origin":205,"position":2},"title":"Realistic CSS Switch","author":"Hima Vincent","date":"February 8, 2017","format":false,"excerpt":"A checkbox input field designed to look like a toggle switch. This is a pure CSS snippet, designed by Nathan Taylor. If you are having trouble with the pen, try the archived copy on GitHub Realistic Toggle Switch Snippet","rel":"","context":"In \"check box\"","block_context":{"text":"check box","link":"https:\/\/codemyui.com\/tag\/check-box\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/realistic-css-switch.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/realistic-css-switch.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/realistic-css-switch.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/realistic-css-switch.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":30253,"url":"https:\/\/codemyui.com\/css-light-bulb-toggle-switch-with-particle-animation\/","url_meta":{"origin":205,"position":3},"title":"CSS Light Bulb Toggle Switch With Particle Animation","author":"Hima Vincent","date":"May 31, 2021","format":false,"excerpt":"Code by: Grzegorz Witczak If you are having trouble with the pen, try the archived copy on\u00a0GitHub. CSS Light Bulb Toggle Switch Snippet","rel":"","context":"In \"toggle switch\"","block_context":{"text":"toggle switch","link":"https:\/\/codemyui.com\/tag\/toggle-switch\/"},"img":{"alt_text":"CSS Light Bulb Toggle Switch With Particle Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/CSS-Light-Bulb-Toggle-Switch-With-Particle-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/CSS-Light-Bulb-Toggle-Switch-With-Particle-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/CSS-Light-Bulb-Toggle-Switch-With-Particle-Animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/CSS-Light-Bulb-Toggle-Switch-With-Particle-Animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":79,"url":"https:\/\/codemyui.com\/pure-css-ampm-toggle-switch\/","url_meta":{"origin":205,"position":4},"title":"Pure CSS AM\/PM Toggle Switch","author":"Hima Vincent","date":"November 30, 2015","format":false,"excerpt":"Check out this cool pure CSS am\/pm toggle switch with day and night animation. Designed by Benjamin R\u00e9thor\u00e9 If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"input field\"","block_context":{"text":"input field","link":"https:\/\/codemyui.com\/tag\/input-field\/"},"img":{"alt_text":"Pure CSS AM\/PM Toggle Switch","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/11\/pure-css-am-pm-toggle-switch.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/11\/pure-css-am-pm-toggle-switch.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/11\/pure-css-am-pm-toggle-switch.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/11\/pure-css-am-pm-toggle-switch.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":24971,"url":"https:\/\/codemyui.com\/toggle-switch-collection-using-pure-css-custom-properties\/","url_meta":{"origin":205,"position":5},"title":"Toggle Switch Collection Using Pure CSS With Custom Properties","author":"Saijo George","date":"November 14, 2017","format":false,"excerpt":"Here are some CSS only toggle buttons that were designed by Stas Melnikov. There are a few styles to choose from circular or square toggles and with different colours in on and off state. If you are having trouble with the pen, try the archived copy on GitHub Toggle Switch\u2026","rel":"","context":"In \"click\u00a0animation\"","block_context":{"text":"click\u00a0animation","link":"https:\/\/codemyui.com\/tag\/click-animation\/"},"img":{"alt_text":"Toggle Switch Collection Using Pure CSS With Custom Properties","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/toggle-switch-collection-using-pure-css-with-custom-properties.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/toggle-switch-collection-using-pure-css-with-custom-properties.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/toggle-switch-collection-using-pure-css-with-custom-properties.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/toggle-switch-collection-using-pure-css-with-custom-properties.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/205","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=205"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/205\/revisions"}],"predecessor-version":[{"id":26311,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/205\/revisions\/26311"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/1045"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=205"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=205"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}