GitHub<\/a><\/p>\n\nSee the Pen Pure Css \u201cday and night\u201d toggle by Benjamin R\u00e9thor\u00e9 (@bnthor) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"
Check out this cool pure CSS am\/pm toggle switch with day and night animation. Designed by Benjamin R\u00e9thor\u00e9<\/p>\nRead More<\/a>","protected":false},"author":2,"featured_media":602,"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":[13170349,30305495,10970854],"class_list":["post-79","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","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\/11\/pure-css-am-pm-toggle-switch.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":125,"url":"https:\/\/codemyui.com\/pure-css-gooey-toggle-switch\/","url_meta":{"origin":79,"position":0},"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":86,"url":"https:\/\/codemyui.com\/pure-css-minion-themed-toggles\/","url_meta":{"origin":79,"position":1},"title":"Pure CSS Minion Themed Toggles","author":"Hima Vincent","date":"November 12, 2015","format":false,"excerpt":"Minion themed toggle switches in pure CSS. Designed by Mohab El-Hamzawy. 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 Minion Themed Toggles","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/09\/Pure-CSS-Minion-Themed-Toggles.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/09\/Pure-CSS-Minion-Themed-Toggles.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/09\/Pure-CSS-Minion-Themed-Toggles.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/09\/Pure-CSS-Minion-Themed-Toggles.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":79,"position":2},"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":[]},{"id":29418,"url":"https:\/\/codemyui.com\/pure-css-neumorphic-design-toggle-switch\/","url_meta":{"origin":79,"position":3},"title":"Pure CSS Neumorphic Design Toggle Switch","author":"Saijo George","date":"February 7, 2020","format":false,"excerpt":"Here is another neumorphic design inspired input field design for you, this time it's a toggle switch with a nice micro interaction when you click on it. If you are having trouble with the pen, try the archived copy on GitHub Neumorphic Toggle Snippet","rel":"","context":"In \"toggle switch\"","block_context":{"text":"toggle switch","link":"https:\/\/codemyui.com\/tag\/toggle-switch\/"},"img":{"alt_text":"Pure CSS Neumorphic Design Toggle Switch","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Pure-CSS-Neumorphic-Design-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\/2020\/02\/Pure-CSS-Neumorphic-Design-Toggle-Switch.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Pure-CSS-Neumorphic-Design-Toggle-Switch.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Pure-CSS-Neumorphic-Design-Toggle-Switch.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":147,"url":"https:\/\/codemyui.com\/pure-css-toggle-with-cross-and-tick-animation\/","url_meta":{"origin":79,"position":4},"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":30051,"url":"https:\/\/codemyui.com\/light-bulb-on-and-off-toggle-switch-in-pure-css\/","url_meta":{"origin":79,"position":5},"title":"Light Bulb On and Off Toggle Switch in Pure CSS","author":"Saijo George","date":"July 29, 2020","format":false,"excerpt":"Code by: Jon Kantner If you are having trouble with the pen, try the archived copy on GitHub Incandescent Globe Switch Snippet","rel":"","context":"In \"toggle switch\"","block_context":{"text":"toggle switch","link":"https:\/\/codemyui.com\/tag\/toggle-switch\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/07\/Light-Bulb-On-and-Off-Toggle-Switch-in-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/07\/Light-Bulb-On-and-Off-Toggle-Switch-in-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/07\/Light-Bulb-On-and-Off-Toggle-Switch-in-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/07\/Light-Bulb-On-and-Off-Toggle-Switch-in-Pure-CSS.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\/79","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=79"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/79\/revisions"}],"predecessor-version":[{"id":26185,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/79\/revisions\/26185"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/602"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=79"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=79"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=79"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}