{"id":24663,"date":"2017-08-22T00:02:48","date_gmt":"2017-08-21T14:02:48","guid":{"rendered":"https:\/\/codemyui.com\/?p=24663"},"modified":"2018-05-16T16:37:08","modified_gmt":"2018-05-16T06:37:08","slug":"bb-8-toggle-switch","status":"publish","type":"post","link":"https:\/\/codemyui.com\/bb-8-toggle-switch\/","title":{"rendered":"BB-8 Toggle Switch"},"content":{"rendered":"<p>If you love <a href=\"https:\/\/codemyui.com\/tag\/movie-inspired\/\">movie inspired web design<\/a>, you will love this simple Star Wars BB-8 <a href=\"https:\/\/codemyui.com\/tag\/toggle-switch\/\">toggle switch<\/a> designed by Pedro Cacique, it was created using only CSS. <\/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\/a8a03fc77dab4bb99d08e3d0871da7db\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<h2>BB-8 Toggle Switch Snippet<\/h2>\n<p class='codepen'  data-height='414' data-theme-id='0' data-slug-hash='rWyrbQ' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen #codevember 20 \u2013 BB8 by Pedro Cacique (@phcacique) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>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.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/bb-8-toggle-switch\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":24664,"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":[25579350,30305495,10970854],"class_list":["post-24663","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-movie-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\/2017\/08\/bb-8-toggle-switch.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":26766,"url":"https:\/\/codemyui.com\/awake-to-sleeping-totoro-toggle\/","url_meta":{"origin":24663,"position":0},"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":25355,"url":"https:\/\/codemyui.com\/pancake-toggle-switch-css\/","url_meta":{"origin":24663,"position":1},"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":29418,"url":"https:\/\/codemyui.com\/pure-css-neumorphic-design-toggle-switch\/","url_meta":{"origin":24663,"position":2},"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":25347,"url":"https:\/\/codemyui.com\/pizza-toggle-switch-css\/","url_meta":{"origin":24663,"position":3},"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":25351,"url":"https:\/\/codemyui.com\/hot-dog-toggle-switch-css\/","url_meta":{"origin":24663,"position":4},"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":26761,"url":"https:\/\/codemyui.com\/ice-cube-to-flame-toggle-switch\/","url_meta":{"origin":24663,"position":5},"title":"Ice Cube to Flame Toggle Switch","author":"Saijo George","date":"August 16, 2018","format":false,"excerpt":"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. If you are having trouble with the pen, try the archived copy on GitHub Ice to Fire\u2026","rel":"","context":"In \"check box\"","block_context":{"text":"check box","link":"https:\/\/codemyui.com\/tag\/check-box\/"},"img":{"alt_text":"Ice Cube to Flame Toggle Switch","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Ice-Cube-to-Flame-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\/2018\/08\/Ice-Cube-to-Flame-Toggle-Switch.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Ice-Cube-to-Flame-Toggle-Switch.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Ice-Cube-to-Flame-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\/24663","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=24663"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/24663\/revisions"}],"predecessor-version":[{"id":25735,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/24663\/revisions\/25735"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/24664"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=24663"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=24663"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=24663"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}