{"id":25018,"date":"2017-11-09T20:33:28","date_gmt":"2017-11-09T10:33:28","guid":{"rendered":"https:\/\/codemyui.com\/?p=25018"},"modified":"2018-05-16T16:35:44","modified_gmt":"2018-05-16T06:35:44","slug":"sushi-style-toggle-button","status":"publish","type":"post","link":"https:\/\/codemyui.com\/sushi-style-toggle-button\/","title":{"rendered":"Sushi Style Toggle Button"},"content":{"rendered":"<p>A really cute cartoon style <a href=\"https:\/\/codemyui.com\/tag\/toggle-switch\/\">sushi toggle switch<\/a>, <a href=\"https:\/\/codemyui.com\/tag\/click-animation\/\">on click<\/a> it changes from a salmon sushi to a cucumber sushi.It was designed by <a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/twitter.com\/chrisgannon\">Chris Gannon<\/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\/1a3a6db61261b5f11f2b532e0f6bce9d\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<h2>Sushi Toggle Button Snippet<\/h2>\n<p class='codepen'  data-height='475' data-theme-id='0' data-slug-hash='zEVjKg' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen Sushi Toggle by Chris Gannon (@chrisgannon) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>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.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/sushi-style-toggle-button\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":25019,"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,24232296,13170349,10970854],"class_list":["post-25018","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-click-animation","tag-food-inspired","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\/11\/sushi-style-toggle-button.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":29478,"url":"https:\/\/codemyui.com\/seeasaw-style-toggle-button\/","url_meta":{"origin":25018,"position":0},"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":26412,"url":"https:\/\/codemyui.com\/tennis-toggle-button-for-sports-websites\/","url_meta":{"origin":25018,"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":25018,"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":25462,"url":"https:\/\/codemyui.com\/flipping-egg-toggle-switch\/","url_meta":{"origin":25018,"position":3},"title":"Flipping Egg Toggle Switch","author":"Saijo George","date":"February 16, 2018","format":false,"excerpt":"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? If you are having trouble with the pen, try the archived\u2026","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\/flipping-egg-toggle-switch.gif?fit=440%2C220&ssl=1&resize=350%2C250","width":350,"height":250},"classes":[]},{"id":25322,"url":"https:\/\/codemyui.com\/burrito-roll-toggle-switch-css\/","url_meta":{"origin":25018,"position":4},"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":25351,"url":"https:\/\/codemyui.com\/hot-dog-toggle-switch-css\/","url_meta":{"origin":25018,"position":5},"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":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/25018","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=25018"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/25018\/revisions"}],"predecessor-version":[{"id":25680,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/25018\/revisions\/25680"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/25019"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=25018"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=25018"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=25018"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}