{"id":24845,"date":"2017-10-27T11:35:42","date_gmt":"2017-10-27T01:35:42","guid":{"rendered":"https:\/\/codemyui.com\/?p=24845"},"modified":"2018-05-16T16:36:16","modified_gmt":"2018-05-16T06:36:16","slug":"colour-changing-toggle-switch","status":"publish","type":"post","link":"https:\/\/codemyui.com\/colour-changing-toggle-switch\/","title":{"rendered":"Colour Changing Toggle Switch"},"content":{"rendered":"<p>A fancy <a href=\"https:\/\/codemyui.com\/tag\/toggle-switch\/\">toggle switch<\/a> that changes color on each <a href=\"https:\/\/codemyui.com\/tag\/click-animation\/\">click<\/a>, designed by <a href=\"https:\/\/twitter.com\/pxl_alexjedi\" target=\"_blank\" rel=\"noopener\">Alex Shevlyakov<\/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\/65e452b199e8db5225674a332f41d73f\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<h2>Colour Changing Toggle Switch Snippet<\/h2>\n<p class='codepen'  data-height='487' data-theme-id='0' data-slug-hash='PKdxYE' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen Realistic toggle button by Alex (@AlexJedi) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>A fancy toggle switch that changes color on each click, designed by Alex Shevlyakov.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/colour-changing-toggle-switch\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":24846,"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":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":[36516635,13170349,10970854],"class_list":["post-24845","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-click-animation","tag-input-field","tag-toggle-switch","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/10\/colour-changing-toggle-switch.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":24971,"url":"https:\/\/codemyui.com\/toggle-switch-collection-using-pure-css-custom-properties\/","url_meta":{"origin":24845,"position":0},"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":2529,"url":"https:\/\/codemyui.com\/day-night-toggle-switch-animation\/","url_meta":{"origin":24845,"position":1},"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":30062,"url":"https:\/\/codemyui.com\/neumorphic-single-colour-sliding-toggle\/","url_meta":{"origin":24845,"position":2},"title":"Neumorphic Single Colour Checkbox Sliding Toggle","author":"Saijo George","date":"July 29, 2020","format":false,"excerpt":"Code by: halvves If you are having trouble with the pen, try the archived copy on GitHub Neumorphic Toggle Snippet","rel":"","context":"In \"neumorphic design\"","block_context":{"text":"neumorphic design","link":"https:\/\/codemyui.com\/tag\/neumorphic-design\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/07\/Neumorphic-Single-Colour-Sliding-Toggle.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\/Neumorphic-Single-Colour-Sliding-Toggle.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/07\/Neumorphic-Single-Colour-Sliding-Toggle.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/07\/Neumorphic-Single-Colour-Sliding-Toggle.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":24845,"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":14007,"url":"https:\/\/codemyui.com\/likehate-toggle-switch\/","url_meta":{"origin":24845,"position":4},"title":"A Like\/Hate Toggle Switch","author":"Hima Vincent","date":"March 27, 2017","format":false,"excerpt":"A checkbox designed to look like a toggle switch that you can switch to like or hate mode, designed by Felix De Montis. If you are having trouble with the pen, try the archived copy on GitHub 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\/03\/love-hate-toggle.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/love-hate-toggle.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/love-hate-toggle.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/love-hate-toggle.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26766,"url":"https:\/\/codemyui.com\/awake-to-sleeping-totoro-toggle\/","url_meta":{"origin":24845,"position":5},"title":"Awake to Sleeping Totoro Toggle","author":"Saijo George","date":"August 16, 2018","format":false,"excerpt":"Here is a movie inspired pure CSS toggle switch designed by Adam Kuhn. The Totoro will switch from an awake to a sleeping state on click. Totoro was a fictional character from the movie My Neighbor Totoro. If you are having trouble with the pen, try the archived copy on\u2026","rel":"","context":"In \"click\u00a0animation\"","block_context":{"text":"click\u00a0animation","link":"https:\/\/codemyui.com\/tag\/click-animation\/"},"img":{"alt_text":"Awake to Sleeping Totoro Toggle","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Awake-to-Sleeping-Totoro-Toggle.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Awake-to-Sleeping-Totoro-Toggle.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Awake-to-Sleeping-Totoro-Toggle.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Awake-to-Sleeping-Totoro-Toggle.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\/24845","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=24845"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/24845\/revisions"}],"predecessor-version":[{"id":25701,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/24845\/revisions\/25701"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/24846"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=24845"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=24845"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=24845"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}