{"id":29478,"date":"2020-02-17T09:40:38","date_gmt":"2020-02-16T22:40:38","guid":{"rendered":"https:\/\/codemyui.com\/?p=29478"},"modified":"2020-02-17T09:40:41","modified_gmt":"2020-02-16T22:40:41","slug":"seeasaw-style-toggle-button","status":"publish","type":"post","link":"https:\/\/codemyui.com\/seeasaw-style-toggle-button\/","title":{"rendered":"Seeasaw style toggle button"},"content":{"rendered":"\n

This is a very simple but elegant toggle button<\/a> design by Chris Gannon. It looks like a seesaw and when you toggle it it slides to the active direction. <\/p>\n\n\n\n

\n\n\n\n\n

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

Seesaw Tilt Toggle Snippet<\/h2>\n\n\n

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

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.<\/p>\nRead More<\/a>","protected":false},"author":1,"featured_media":29481,"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":[10970854,46470371,112936],"class_list":["post-29478","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-toggle-switch","tag-gsap","tag-svg","has-post-video","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Seeasaw-style-toggle-button.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":25018,"url":"https:\/\/codemyui.com\/sushi-style-toggle-button\/","url_meta":{"origin":29478,"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":26412,"url":"https:\/\/codemyui.com\/tennis-toggle-button-for-sports-websites\/","url_meta":{"origin":29478,"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":29478,"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":29478,"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":25623,"url":"https:\/\/codemyui.com\/toggle-switch-with-lables\/","url_meta":{"origin":29478,"position":4},"title":"Toggle Switch With Lables","author":"Saijo George","date":"April 20, 2018","format":false,"excerpt":"This toggle switch will look great on websites where you want to show a toggle option with lables on them. It was designed by Jarek Ostrowski. If you are having trouble with the pen, try the archived copy on GitHub Toggle Switch Snippet","rel":"","context":"In \"input field\"","block_context":{"text":"input field","link":"https:\/\/codemyui.com\/tag\/input-field\/"},"img":{"alt_text":"Toggle Switch With Lables","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/04\/Toggle-Switch-With-Lables.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/04\/Toggle-Switch-With-Lables.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/04\/Toggle-Switch-With-Lables.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/04\/Toggle-Switch-With-Lables.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":24845,"url":"https:\/\/codemyui.com\/colour-changing-toggle-switch\/","url_meta":{"origin":29478,"position":5},"title":"Colour Changing Toggle Switch","author":"Hima Vincent","date":"October 27, 2017","format":false,"excerpt":"A fancy toggle switch that changes color on each click, designed by Alex Shevlyakov. If you are having trouble with the pen, try the archived copy on GitHub Colour Changing Toggle Switch Snippet","rel":"","context":"In \"click\u00a0animation\"","block_context":{"text":"click\u00a0animation","link":"https:\/\/codemyui.com\/tag\/click-animation\/"},"img":{"alt_text":"Colour Changing Toggle Switch","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/10\/colour-changing-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\/10\/colour-changing-toggle-switch.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/10\/colour-changing-toggle-switch.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/10\/colour-changing-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\/29478","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=29478"}],"version-history":[{"count":3,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/29478\/revisions"}],"predecessor-version":[{"id":29483,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/29478\/revisions\/29483"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/29481"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=29478"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=29478"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=29478"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}