{"id":1895,"date":"2016-08-27T09:57:31","date_gmt":"2016-08-26T23:57:31","guid":{"rendered":"http:\/\/codemyui.com\/?p=1895"},"modified":"2018-05-17T09:53:40","modified_gmt":"2018-05-16T23:53:40","slug":"day-night-toggle-switch-changes-background-color","status":"publish","type":"post","link":"https:\/\/codemyui.com\/day-night-toggle-switch-changes-background-color\/","title":{"rendered":"Day Night Toggle Switch That Changes Background Color"},"content":{"rendered":"

This simple input field<\/a> is styled to look like a day-night toggle switch<\/a>, it was designed by Joseph Shenton. You get the option to switch between day and night and the background color will change to yellow or black depending on the state of the button. <\/p>\n

If you are having trouble with the pen, try the archived copy on GitHub<\/a><\/p>\n

\nSee the Pen Brightness and Gamma Switch by Joseph Shenton (@TeamiHackify) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"

This simple input field is styled to look like a day-night toggle switch, it was designed by Joseph Shenton. You get the option to switch between day and night and the background color will change to yellow or black depending on the state of the button.<\/p>\nRead More<\/a>","protected":false},"author":2,"featured_media":1902,"comment_status":"closed","ping_status":"closed","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":true,"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,4294273,10970854],"class_list":["post-1895","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-input-field","tag-jquery-plugin","tag-toggle-switch","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/day-night-toggle-switch-background-color.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":2529,"url":"https:\/\/codemyui.com\/day-night-toggle-switch-animation\/","url_meta":{"origin":1895,"position":0},"title":"Day And Night Toggle Switch Animation","author":"Hima Vincent","date":"October 12, 2016","format":false,"excerpt":"A day\/night toggle switch which changes the background colour when you switch between the on and off state. In this snippet, when you switch to the daylight state the background changes to blue and the toggle itself morphs into the sun. When you switch to the night state the background\u2026","rel":"","context":"In \"click\u00a0animation\"","block_context":{"text":"click\u00a0animation","link":"https:\/\/codemyui.com\/tag\/click-animation\/"},"img":{"alt_text":"Day Nght Toggle Switch","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/day-and-night-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\/2016\/10\/day-and-night-toggle-switch.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/day-and-night-toggle-switch.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/day-and-night-toggle-switch.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29385,"url":"https:\/\/codemyui.com\/day-night-toggle-with-background-animation\/","url_meta":{"origin":1895,"position":1},"title":"Day-Night Toggle with Background Animation","author":"Saijo George","date":"February 6, 2020","format":false,"excerpt":"This is a nice little SVG and HTML animation for a toggle switch, it has a day and night mode. During the day the background of the toggle has clouds moving right to left and a starry night sky as the switch and on click, the starry night expands and\u2026","rel":"","context":"In \"toggle switch\"","block_context":{"text":"toggle switch","link":"https:\/\/codemyui.com\/tag\/toggle-switch\/"},"img":{"alt_text":"Day-Night Toggle with Background Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Day-Night-Toggle-with-Background-Animation.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\/Day-Night-Toggle-with-Background-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Day-Night-Toggle-with-Background-Animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Day-Night-Toggle-with-Background-Animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":24845,"url":"https:\/\/codemyui.com\/colour-changing-toggle-switch\/","url_meta":{"origin":1895,"position":2},"title":"Colour Changing Toggle Switch","author":"Hima Vincent","date":"October 27, 2017","format":false,"excerpt":"A fancy toggle switch that changes color on each click, designed by Alex Shevlyakov. If you are having trouble with the pen, try the archived copy on GitHub Colour Changing Toggle Switch Snippet","rel":"","context":"In \"click\u00a0animation\"","block_context":{"text":"click\u00a0animation","link":"https:\/\/codemyui.com\/tag\/click-animation\/"},"img":{"alt_text":"Colour Changing Toggle Switch","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/10\/colour-changing-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\/2017\/10\/colour-changing-toggle-switch.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/10\/colour-changing-toggle-switch.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/10\/colour-changing-toggle-switch.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":1895,"position":3},"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":29418,"url":"https:\/\/codemyui.com\/pure-css-neumorphic-design-toggle-switch\/","url_meta":{"origin":1895,"position":4},"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":1895,"position":5},"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":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/1895","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=1895"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/1895\/revisions"}],"predecessor-version":[{"id":26059,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/1895\/revisions\/26059"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/1902"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=1895"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=1895"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=1895"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}