{"id":26761,"date":"2018-08-16T09:59:48","date_gmt":"2018-08-15T23:59:48","guid":{"rendered":"https:\/\/codemyui.com\/?p=26761"},"modified":"2018-08-16T09:59:48","modified_gmt":"2018-08-15T23:59:48","slug":"ice-cube-to-flame-toggle-switch","status":"publish","type":"post","link":"https:\/\/codemyui.com\/ice-cube-to-flame-toggle-switch\/","title":{"rendered":"Ice Cube to Flame Toggle Switch"},"content":{"rendered":"

Here is a CSS only<\/a> toggle switch<\/a> design for a checkbox<\/a> where you have the option to switch between an ice cube and a flame it can work well on food inspired websites<\/a>. <\/p>\n

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

Ice to Fire Toggle Button Snippet<\/h2>\n

\nSee the Pen Cold-Hot Toggle Switch Forked Corrected Visual Errors in Jon Kantner\u2019s pen by Psychi-Enkavma (@Psychi-Enkavma) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"

Here is a CSS only toggle switch design for a checkbox where you have the option to switch between an ice cube and a flame it can work well on food inspired websites.<\/p>\nRead More<\/a>","protected":false},"author":1,"featured_media":26763,"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":[7644055,24232296,13170349,30305495,10970854],"class_list":["post-26761","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-check-box","tag-food-inspired","tag-input-field","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\/08\/Ice-Cube-to-Flame-Toggle-Switch.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":25355,"url":"https:\/\/codemyui.com\/pancake-toggle-switch-css\/","url_meta":{"origin":26761,"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":26761,"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":25347,"url":"https:\/\/codemyui.com\/pizza-toggle-switch-css\/","url_meta":{"origin":26761,"position":2},"title":"Pizza Toggle Switch in CSS","author":"Hima Vincent","date":"October 30, 2017","format":false,"excerpt":"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's is easy for them to do that now. 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":"Pizza Toggle Switch in CSS","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/pizza-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\/pizza-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\/pizza-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\/pizza-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":26761,"position":3},"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":29418,"url":"https:\/\/codemyui.com\/pure-css-neumorphic-design-toggle-switch\/","url_meta":{"origin":26761,"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":24663,"url":"https:\/\/codemyui.com\/bb-8-toggle-switch\/","url_meta":{"origin":26761,"position":5},"title":"BB-8 Toggle Switch","author":"Hima Vincent","date":"August 22, 2017","format":false,"excerpt":"If you love movie inspired web design, you will love this simple Star Wars BB-8 toggle switch designed by Pedro Cacique, it was created using only CSS. If you are having trouble with the pen, try the archived copy on GitHub BB-8 Toggle Switch Snippet","rel":"","context":"In \"movie inspired\"","block_context":{"text":"movie inspired","link":"https:\/\/codemyui.com\/tag\/movie-inspired\/"},"img":{"alt_text":"BB-8 Toggle Switch","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/08\/bb-8-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\/08\/bb-8-toggle-switch.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/08\/bb-8-toggle-switch.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/08\/bb-8-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\/26761","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=26761"}],"version-history":[{"count":2,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/26761\/revisions"}],"predecessor-version":[{"id":26764,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/26761\/revisions\/26764"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/26763"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=26761"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=26761"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=26761"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}