{"id":26845,"date":"2018-09-14T13:41:11","date_gmt":"2018-09-14T03:41:11","guid":{"rendered":"https:\/\/codemyui.com\/?p=26845"},"modified":"2018-09-21T15:00:14","modified_gmt":"2018-09-21T05:00:14","slug":"button-into-modal-form-animation","status":"publish","type":"post","link":"https:\/\/codemyui.com\/button-into-modal-form-animation\/","title":{"rendered":"Button into Modal Form Animation"},"content":{"rendered":"

If you want to show a circular<\/a> button<\/a> that morphs into a user submission form<\/a> then this snippet by Greg Hovanesyan is just what you need. <\/p>\n

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

Button into Modal Form Snippet<\/h2>\n

\nSee the Pen UI: Button morphing into form by Greg Hovanesyan (@gregh) on CodePen.<\/p>\n\n

\u00a0<\/p>\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

If you want to show a circular button that morphs into a user submission form then this snippet by Greg Hovanesyan is just what you need.<\/p>\nRead More<\/a>","protected":false},"author":1,"featured_media":26850,"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":[1807,94913,43627,36516635,964575,5441733,195143],"class_list":["post-26845","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-animation","tag-button","tag-circle","tag-click-animation","tag-contact-form","tag-modal-window","tag-pop-up","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/09\/Button-into-Modal-Form-Animation-1.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":30241,"url":"https:\/\/codemyui.com\/login-modal-with-floating-placeholder-and-animated-neon-submit-button\/","url_meta":{"origin":26845,"position":0},"title":"Login Modal With Floating Placeholder And Animated Neon Submit Button","author":"Hima Vincent","date":"May 30, 2021","format":false,"excerpt":"Code by: Soufiane Khalfaoui Hassani If you are having trouble with the pen, try the archived copy on\u00a0GitHub. Login Screen With A Neon Button Snippet","rel":"","context":"In \"login form\"","block_context":{"text":"login form","link":"https:\/\/codemyui.com\/tag\/login-form\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Login-Modal-With-Floating-Placeholder-And-Animated-Neon-Submit-Button.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Login-Modal-With-Floating-Placeholder-And-Animated-Neon-Submit-Button.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Login-Modal-With-Floating-Placeholder-And-Animated-Neon-Submit-Button.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Login-Modal-With-Floating-Placeholder-And-Animated-Neon-Submit-Button.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25519,"url":"https:\/\/codemyui.com\/animated-unsubscribe-modal-sad-happy-face\/","url_meta":{"origin":26845,"position":1},"title":"Animated Unsubscribe Modal with Sad and Happy Face","author":"Saijo George","date":"September 22, 2019","format":false,"excerpt":"I love subtle animations on websites and if you remember we had an awesome owl and yeti login page recently, this particular design comes from Agathe. There is an email unsubscribe form with a sad looking envelope and when you hover over the unsubscribe button the page cower down in\u2026","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/03\/animated-unsubscribe-modal-with-sad-and-happy-face.gif?fit=440%2C220&ssl=1&resize=350%2C250","width":350,"height":250},"classes":[]},{"id":15573,"url":"https:\/\/codemyui.com\/modal-sidebar-toggle-button\/","url_meta":{"origin":26845,"position":2},"title":"Modal Sidebar Toggle Button","author":"Hima Vincent","date":"May 9, 2017","format":false,"excerpt":"IF you want to show some content in the sidebar but want to hide it till the user clicks on a button, this snippet by Kye Hohenberger might just what you need. When you click on the button the modal sidebar slides in from the left and reveals the hidden\u2026","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Modal Sidebar Toggle Button","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/modal-sidebar-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\/05\/modal-sidebar-toggle-button.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/modal-sidebar-toggle-button.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/modal-sidebar-toggle-button.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":15503,"url":"https:\/\/codemyui.com\/simple-button-popup-modal-window\/","url_meta":{"origin":26845,"position":3},"title":"Simple Button to Popup Modal Window","author":"Hima Vincent","date":"May 4, 2017","format":false,"excerpt":"When you want to add some short messages via a modal window this handy script by Samuel Janes might come in handy. When you click on the button it pops up the modal window and reveals your message. If you are having trouble with the pen, try the archived copy\u2026","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Simple Button to Popup Modal Window","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/simple-button-to-popup-modal-window.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/simple-button-to-popup-modal-window.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/simple-button-to-popup-modal-window.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/simple-button-to-popup-modal-window.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25317,"url":"https:\/\/codemyui.com\/paint-splatter-modal-video-background\/","url_meta":{"origin":26845,"position":4},"title":"Paint Splatter Modal with Video Background","author":"Saijo George","date":"January 18, 2018","format":false,"excerpt":"This modal is similar to the inkblot modal but here when you click on the modal button the paint splatter reveals the video in the background. This will be an epic way to showcase the pop-up modal on your next project. It was designed by Jamie Coulter If you are\u2026","rel":"","context":"In \"click\u00a0animation\"","block_context":{"text":"click\u00a0animation","link":"https:\/\/codemyui.com\/tag\/click-animation\/"},"img":{"alt_text":"Paint Splatter Modal with Video Background","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/Paint-Splatter-Modal-with-Video-Background.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\/Paint-Splatter-Modal-with-Video-Background.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/Paint-Splatter-Modal-with-Video-Background.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/Paint-Splatter-Modal-with-Video-Background.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":17,"url":"https:\/\/codemyui.com\/pure-css-modal-box-on-button-click\/","url_meta":{"origin":26845,"position":5},"title":"Pure CSS Modal Box On Button Click","author":"Hima Vincent","date":"May 20, 2016","format":false,"excerpt":"A pure CSS button which on cick opens up a modal pop up box.Designed by\u00a0ekrof.If you are having trouble with the pen, try the archived copy on GitHub If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"click me modal window","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/05\/click-me-modal-window.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\/click-me-modal-window.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/05\/click-me-modal-window.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/05\/click-me-modal-window.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\/26845","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=26845"}],"version-history":[{"count":5,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/26845\/revisions"}],"predecessor-version":[{"id":26864,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/26845\/revisions\/26864"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/26850"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=26845"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=26845"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=26845"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}