{"id":25347,"date":"2017-10-30T13:09:17","date_gmt":"2017-10-30T03:09:17","guid":{"rendered":"https:\/\/codemyui.com\/?p=25347"},"modified":"2018-05-16T16:36:14","modified_gmt":"2018-05-16T06:36:14","slug":"pizza-toggle-switch-css","status":"publish","type":"post","link":"https:\/\/codemyui.com\/pizza-toggle-switch-css\/","title":{"rendered":"Pizza Toggle Switch in CSS"},"content":{"rendered":"<p>How cool would it be to see your favorite pizza shop use <a href=\"https:\/\/codemyui.com\/tag\/toggle-switch\/\">toggle switch<\/a> use this design to show if you want to add various toppings?  Thanks to the snippet designed by <a href=\"https:\/\/twitter.com\/cobra_winfrey\" target=\"_blank\" rel=\"noopener\">Adam Kuhn<\/a>, it&#8217;s is easy for them to do that now. <\/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\/92bfce4d1fad9a559bc84fb8b985d42a\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<h2>Pizza Toggle Snippet<\/h2>\n<p class='codepen'  data-height='646' data-theme-id='0' data-slug-hash='xXvdbE' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen Pure CSS Pizza Toggles by Adam Kuhn (@cobra_winfrey) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>How cool would it be to see your favorite pizza shop use toggle switch use this design to show if you want to add various toppings? Thanks to the snippet designed by Adam Kuhn, it&#8217;s is easy for them to do that now.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/pizza-toggle-switch-css\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":25348,"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":[24232296,30305495,10970854],"class_list":["post-25347","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-food-inspired","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\/2018\/01\/pizza-toggle-switch-in-css.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":25355,"url":"https:\/\/codemyui.com\/pancake-toggle-switch-css\/","url_meta":{"origin":25347,"position":0},"title":"Pancake Toggle Switch in CSS","author":"Saijo George","date":"January 14, 2018","format":false,"excerpt":"Time for another food-related toggle switch. This CSS only snippet was designed by Adam Kuhn. You can also check out some of the other food inspired toggle designs inspired by items like pizza, burrito, sausage and even sushi. If you are having trouble with the pen, try the archived copy\u2026","rel":"","context":"In \"food inspired\"","block_context":{"text":"food inspired","link":"https:\/\/codemyui.com\/tag\/food-inspired\/"},"img":{"alt_text":"Pancake Toggle Switch in CSS","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/pancake-toggle-switch-in-css.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/pancake-toggle-switch-in-css.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/pancake-toggle-switch-in-css.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/pancake-toggle-switch-in-css.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25351,"url":"https:\/\/codemyui.com\/hot-dog-toggle-switch-css\/","url_meta":{"origin":25347,"position":1},"title":"Hot Dog Toggle Switch in CSS","author":"Saijo George","date":"January 13, 2018","format":false,"excerpt":"We have toggle switches for pizza, burrito and sushi and now we have one for a hot dog, this was designed by Adam Kuhn and is in pure CSS. If you are having trouble with the pen, try the archived copy on GitHub Hot Dog Toggle Snippet","rel":"","context":"In \"food inspired\"","block_context":{"text":"food inspired","link":"https:\/\/codemyui.com\/tag\/food-inspired\/"},"img":{"alt_text":"Hot Dog Toggle Switch in CSS","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/hot-dog-toggle-switch-in-css.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/hot-dog-toggle-switch-in-css.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/hot-dog-toggle-switch-in-css.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/hot-dog-toggle-switch-in-css.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25322,"url":"https:\/\/codemyui.com\/burrito-roll-toggle-switch-css\/","url_meta":{"origin":25347,"position":2},"title":"Burrito Roll Toggle Switch in CSS","author":"Saijo George","date":"January 12, 2018","format":false,"excerpt":"We have seen some really fancy CSS toggle switches and this one comes from Adam Kuhn. When you click on the tortilla, the burrito is made and rolled all using CSS wizardry. If you liked this, you might also like the sushi toggle. If you are having trouble with the\u2026","rel":"","context":"In \"food inspired\"","block_context":{"text":"food inspired","link":"https:\/\/codemyui.com\/tag\/food-inspired\/"},"img":{"alt_text":"Burrito Roll Toggle Switch in CSS","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/burrito-roll-toggle-switch-in-css.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/burrito-roll-toggle-switch-in-css.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/burrito-roll-toggle-switch-in-css.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/burrito-roll-toggle-switch-in-css.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":25347,"position":3},"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":[]},{"id":29627,"url":"https:\/\/codemyui.com\/labyrinth-style-balancing-ball-neumorphic-toggle\/","url_meta":{"origin":25347,"position":4},"title":"Labyrinth Style Balancing Ball Neumorphic Toggle","author":"Saijo George","date":"April 20, 2020","format":false,"excerpt":"Code by: Adam Kuhn from Codepen If you are having trouble with the pen, try the archived copy on GitHub Balancing Ball Neumorphic Toggle Snippet","rel":"","context":"In \"toggle switch\"","block_context":{"text":"toggle switch","link":"https:\/\/codemyui.com\/tag\/toggle-switch\/"},"img":{"alt_text":"Labyrinth Style Balancing Ball Neumorphic Toggle","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Labyrinth-Style-Balancing-Ball-Neumorphic-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\/04\/Labyrinth-Style-Balancing-Ball-Neumorphic-Toggle.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Labyrinth-Style-Balancing-Ball-Neumorphic-Toggle.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Labyrinth-Style-Balancing-Ball-Neumorphic-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":25347,"position":5},"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":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/25347","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=25347"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/25347\/revisions"}],"predecessor-version":[{"id":25700,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/25347\/revisions\/25700"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/25348"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=25347"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=25347"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=25347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}