{"id":25462,"date":"2018-02-16T18:00:54","date_gmt":"2018-02-16T08:00:54","guid":{"rendered":"https:\/\/codemyui.com\/?p=25462"},"modified":"2018-02-16T18:00:54","modified_gmt":"2018-02-16T08:00:54","slug":"flipping-egg-toggle-switch","status":"publish","type":"post","link":"https:\/\/codemyui.com\/flipping-egg-toggle-switch\/","title":{"rendered":"Flipping Egg Toggle Switch"},"content":{"rendered":"

Here is a food<\/a> inspired toggle switch<\/a> designed to mimic flipping a fried egg. It was designed by Chris Gannon<\/a> and you can also get you eggs p\u0336o\u0336a\u0336c\u0336h\u0336e\u0336d\u0336 \u0336 as a loader<\/a>. Would you rather have a pancake<\/a> instead? <\/p>\n

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

Flipping Egg Toggle Snippet<\/h2>\n

\nSee the Pen Egg Toggle by Chris Gannon (@chrisgannon) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"

Here is a food inspired toggle switch designed to mimic flipping a fried egg. It was designed by Chris Gannon and you can also get you eggs p\u0336o\u0336a\u0336c\u0336h\u0336e\u0336d\u0336 \u0336 as a loader. Would you rather have a pancake instead?<\/p>\nRead More<\/a>","protected":false},"author":1,"featured_media":25463,"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":[24232296,10970854],"class_list":["post-25462","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-food-inspired","tag-toggle-switch","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/02\/flipping-egg-toggle-switch.gif?fit=440%2C220&ssl=1","jetpack-related-posts":[{"id":25018,"url":"https:\/\/codemyui.com\/sushi-style-toggle-button\/","url_meta":{"origin":25462,"position":0},"title":"Sushi Style Toggle Button","author":"Hima Vincent","date":"November 9, 2017","format":false,"excerpt":"A really cute cartoon style sushi toggle switch, on click it changes from a salmon sushi to a cucumber sushi.It was designed by Chris Gannon. If you are having trouble with the pen, try the archived copy on GitHub Sushi Toggle Button Snippet","rel":"","context":"In \"click\u00a0animation\"","block_context":{"text":"click\u00a0animation","link":"https:\/\/codemyui.com\/tag\/click-animation\/"},"img":{"alt_text":"Sushi Style Toggle Button","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/sushi-style-toggle-button.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\/sushi-style-toggle-button.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/sushi-style-toggle-button.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/sushi-style-toggle-button.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26412,"url":"https:\/\/codemyui.com\/tennis-toggle-button-for-sports-websites\/","url_meta":{"origin":25462,"position":1},"title":"Tennis Toggle Button for Sports Websites","author":"Saijo George","date":"June 11, 2018","format":false,"excerpt":"Are you running a sports-related website and need to come up with a sports-related design for your toggle switch? Aint this your lucky day, Chris Gannon has come up with an awesome little Wimbledon inspired toggle design using GSAP. When you click on the toggle the tennis ball bounces and\u2026","rel":"","context":"In \"gsap\"","block_context":{"text":"gsap","link":"https:\/\/codemyui.com\/tag\/gsap\/"},"img":{"alt_text":"Tennis Toggle Button for Sports Websites","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/06\/Tennis-Toggle-Button-for-Sports-Websites.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/06\/Tennis-Toggle-Button-for-Sports-Websites.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/06\/Tennis-Toggle-Button-for-Sports-Websites.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/06\/Tennis-Toggle-Button-for-Sports-Websites.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":35,"url":"https:\/\/codemyui.com\/rounded-toggle-switch\/","url_meta":{"origin":25462,"position":2},"title":"Rounded Toggle Switch","author":"Hima Vincent","date":"April 29, 2016","format":false,"excerpt":"A nice little-rounded toggle switch that you can use in your web projects. Click on it toggles from on to off state, neatly depicted by green and red colours. Designed by Chris Gannon.\u00a0 If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"click\u00a0animation\"","block_context":{"text":"click\u00a0animation","link":"https:\/\/codemyui.com\/tag\/click-animation\/"},"img":{"alt_text":"Rounded Toggle Switch","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/04\/rounded-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\/04\/rounded-toggle-switch.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/04\/rounded-toggle-switch.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/04\/rounded-toggle-switch.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29478,"url":"https:\/\/codemyui.com\/seeasaw-style-toggle-button\/","url_meta":{"origin":25462,"position":3},"title":"Seeasaw style toggle button","author":"Saijo George","date":"February 17, 2020","format":false,"excerpt":"This is a very simple but elegant toggle button design by Chris Gannon. It looks like a seesaw and when you toggle it it slides to the active direction. If you are having trouble with the pen, try the archived copy on GitHub Seesaw Tilt Toggle Snippet","rel":"","context":"In \"toggle switch\"","block_context":{"text":"toggle switch","link":"https:\/\/codemyui.com\/tag\/toggle-switch\/"},"img":{"alt_text":"Seeasaw style toggle button","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Seeasaw-style-toggle-button.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\/Seeasaw-style-toggle-button.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Seeasaw-style-toggle-button.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Seeasaw-style-toggle-button.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":30057,"url":"https:\/\/codemyui.com\/break-open-an-egg-and-flip-it-using-a-spatula-toggle\/","url_meta":{"origin":25462,"position":4},"title":"Break Open an Egg and Flip it using a Spatula Toggle","author":"Saijo George","date":"July 29, 2020","format":false,"excerpt":"Code by: Aaron Iker If you are having trouble with the pen, try the archived copy on GitHub Egg Switch Snippet","rel":"","context":"In \"toggle switch\"","block_context":{"text":"toggle switch","link":"https:\/\/codemyui.com\/tag\/toggle-switch\/"},"img":{"alt_text":"Break Open an Egg and Flip it using a Spatula Toggle","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/07\/Break-Open-an-Egg-and-Flip-it-using-a-Spatula-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\/Break-Open-an-Egg-and-Flip-it-using-a-Spatula-Toggle.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/07\/Break-Open-an-Egg-and-Flip-it-using-a-Spatula-Toggle.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/07\/Break-Open-an-Egg-and-Flip-it-using-a-Spatula-Toggle.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25458,"url":"https:\/\/codemyui.com\/fried-egg-loader\/","url_meta":{"origin":25462,"position":5},"title":"Fried Egg Loader","author":"Saijo George","date":"February 16, 2018","format":false,"excerpt":"We have another food inspired design for you all today, this one was designed by Chris Gannon. We have multiple fried eggs appearing one after the other indicating a loader in action. If you are having trouble with the pen, try the archived copy on GitHub Egg Loader Snippet","rel":"","context":"In \"food inspired\"","block_context":{"text":"food inspired","link":"https:\/\/codemyui.com\/tag\/food-inspired\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/02\/fried-egg-loader.gif?fit=440%2C220&ssl=1&resize=350%2C250","width":350,"height":250},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/25462","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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=25462"}],"version-history":[{"count":0,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/25462\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/25463"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=25462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=25462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=25462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}