{"id":35,"date":"2016-04-29T01:18:55","date_gmt":"2016-04-29T01:18:55","guid":{"rendered":"http:\/\/codemyui.com\/rounded-toggle-switch\/"},"modified":"2018-05-17T12:18:59","modified_gmt":"2018-05-17T02:18:59","slug":"rounded-toggle-switch","status":"publish","type":"post","link":"https:\/\/codemyui.com\/rounded-toggle-switch\/","title":{"rendered":"Rounded Toggle Switch"},"content":{"rendered":"

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<\/a>.\u00a0<\/p>\n

<\/p>\n

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

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

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<\/p>\nRead More<\/a>","protected":false},"author":2,"featured_media":406,"comment_status":"open","ping_status":"open","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,13170349,10970854],"class_list":["post-35","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-click-animation","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\/2016\/04\/rounded-toggle-switch.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":25018,"url":"https:\/\/codemyui.com\/sushi-style-toggle-button\/","url_meta":{"origin":35,"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":25462,"url":"https:\/\/codemyui.com\/flipping-egg-toggle-switch\/","url_meta":{"origin":35,"position":1},"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":26412,"url":"https:\/\/codemyui.com\/tennis-toggle-button-for-sports-websites\/","url_meta":{"origin":35,"position":2},"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":29478,"url":"https:\/\/codemyui.com\/seeasaw-style-toggle-button\/","url_meta":{"origin":35,"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":1414,"url":"https:\/\/codemyui.com\/balloon-range-slider-svg\/","url_meta":{"origin":35,"position":4},"title":"Balloon Range Slider in SVG","author":"Hima Vincent","date":"August 5, 2016","format":false,"excerpt":"If you an awesome looking range slider, NOT to be confused with image sliders then this is something that you will love. Designed by Chris Gannon, this range slider offers a smooth animation when you click and hold on the slider a balloon pops out showing the slider range anywhere\u2026","rel":"","context":"In \"input field\"","block_context":{"text":"input field","link":"https:\/\/codemyui.com\/tag\/input-field\/"},"img":{"alt_text":"Balloon Range Slider in SVG","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/balloon-range-slider-in-svg.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/balloon-range-slider-in-svg.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/balloon-range-slider-in-svg.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/balloon-range-slider-in-svg.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":32,"url":"https:\/\/codemyui.com\/svg-responsive-devices-transition\/","url_meta":{"origin":35,"position":5},"title":"SVG Responsive\u00a0Devices Transition","author":"Hima Vincent","date":"May 6, 2016","format":false,"excerpt":"This is a great animation that you can use to show responsive\u00a0design in your portfolio. Designed by Chris Gannon If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"SVG Responsive Devices Transition","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/05\/svg-responsive-devices-transition.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/05\/svg-responsive-devices-transition.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/05\/svg-responsive-devices-transition.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/05\/svg-responsive-devices-transition.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\/35","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=35"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/35\/revisions"}],"predecessor-version":[{"id":26140,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/35\/revisions\/26140"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/406"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=35"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=35"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}