{"id":14347,"date":"2017-04-11T11:05:02","date_gmt":"2017-04-11T01:05:02","guid":{"rendered":"https:\/\/codemyui.com\/?p=14347"},"modified":"2018-05-16T16:44:46","modified_gmt":"2018-05-16T06:44:46","slug":"rounded-button-email-notification","status":"publish","type":"post","link":"https:\/\/codemyui.com\/rounded-button-email-notification\/","title":{"rendered":"Rounded Button to Email Notification"},"content":{"rendered":"

We have seen a few different button morphing to email<\/a> form\/push notification field<\/a>, etc, this is another take on it designed by Danny Iovane. Great when you have limited space to play around with on your web page, you can use this button<\/a> to reveral the email form<\/a> on click<\/a>.<\/p>\n

<\/p>\n

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

Button to Email Notification Snippet<\/h2>\n

\nSee the Pen Notify Me by Danny Iovane (@gingerdude) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"

We have seen a few different button morphing to email form\/push notification field, etc, this is another take on it designed by Danny Iovane. Great when you have limited space to play around with on your web page, you can use this button to reveral the email form on click.<\/p>\nRead More<\/a>","protected":false},"author":2,"featured_media":14352,"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":[94913,36516635,40156984,13170349,4920130],"class_list":["post-14347","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-button","tag-click-animation","tag-email-signup-forms","tag-input-field","tag-text-field","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/email-notification-button.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":6491,"url":"https:\/\/codemyui.com\/push-notifications-newsletter-signup-button-form-animation\/","url_meta":{"origin":14347,"position":0},"title":"Push Notifications & Newsletter Signup Button to Form Animation","author":"Hima Vincent","date":"February 15, 2017","format":false,"excerpt":"With this awesome snippet designed by 14islands you can show 2 buttons side by side one for push notifications and the other one for email newsletters. When someone clicks on the push notification button it greys out and turns into a button to disable push notifications. When someone clicks on\u2026","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Push Notifications & Newsletter Signup Button to Form Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/push-notifications-newsletter-signup-button-to-form-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/push-notifications-newsletter-signup-button-to-form-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/push-notifications-newsletter-signup-button-to-form-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/push-notifications-newsletter-signup-button-to-form-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":14535,"url":"https:\/\/codemyui.com\/delete-icon-button-animation\/","url_meta":{"origin":14347,"position":1},"title":"Delete Icon to Button Animation","author":"Hima Vincent","date":"March 30, 2017","format":false,"excerpt":"A delete trashcan icon that changes to a delete button on hover and it shows an \"are you sure\" confirmation on click and once more click and you get the deletion successful message. Designed by Danny Iovane. If you are having trouble with the pen, try the archived copy on\u2026","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/delete-button-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/delete-button-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/delete-button-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/delete-button-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29147,"url":"https:\/\/codemyui.com\/bouncy-subscription-button-to-email-field-microinteraction\/","url_meta":{"origin":14347,"position":2},"title":"Bouncy Subscription Button to Email Field MicroInteraction","author":"Saijo George","date":"January 7, 2020","format":false,"excerpt":"This fancy CTA button has a sweet micro-interaction on click, it animates into a text field asking the user to enter their email effectively acting as an email subscription form. It was designed by Valery Alikin. If you are having trouble with the pen, try the archived copy on GitHub\u2026","rel":"","context":"In \"email signup forms\"","block_context":{"text":"email signup forms","link":"https:\/\/codemyui.com\/tag\/email-signup-forms\/"},"img":{"alt_text":"Bouncy Subscription Button to Email Field MicroInteraction","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Bouncy-Subscription-Button-to-Email-Field-MicroInteraction.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Bouncy-Subscription-Button-to-Email-Field-MicroInteraction.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Bouncy-Subscription-Button-to-Email-Field-MicroInteraction.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Bouncy-Subscription-Button-to-Email-Field-MicroInteraction.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":4224,"url":"https:\/\/codemyui.com\/button-morph-email-subscription-form\/","url_meta":{"origin":14347,"position":3},"title":"Button Morph to Email Subscription Form","author":"Hima Vincent","date":"November 14, 2016","format":false,"excerpt":"This is an email subscription form designed by Ahmad Shadeed where you accept the user's email address as the input. It starts off with a button that you can use as a Call To Action element on your landing page and when you click on it, it morphs to a\u2026","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Button Morph to Email Subscription Form","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/button-morph-to-email-subscription-form.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/button-morph-to-email-subscription-form.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/button-morph-to-email-subscription-form.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/button-morph-to-email-subscription-form.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25374,"url":"https:\/\/codemyui.com\/button-email-optin-dropdown\/","url_meta":{"origin":14347,"position":4},"title":"Button with Email Optin Dropdown","author":"Saijo George","date":"January 29, 2018","format":false,"excerpt":"This email optin form appears as a button and when you click on it, the text field asking for your email address is revealed. It was designed by Adam Rasheed. If you are having trouble with the pen, try the archived copy on GitHub Email Optin Dropdown Snippet","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Button with Email Optin Dropdown","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/button-with-email-optin-dropdown.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\/button-with-email-optin-dropdown.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/button-with-email-optin-dropdown.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/button-with-email-optin-dropdown.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25454,"url":"https:\/\/codemyui.com\/single-field-email-registration-form-validation\/","url_meta":{"origin":14347,"position":5},"title":"Single Field Email Registration Form with Validation","author":"Saijo George","date":"February 16, 2018","format":false,"excerpt":"Here is a simple email registration form designed by Derek Torsani on Dribbble and converted to code by Elior Tabeka. There is a single text filed and on activating it by clicking on it the inactive OK button appears and on successful validation of the input as an email address,\u2026","rel":"","context":"In \"email signup forms\"","block_context":{"text":"email signup forms","link":"https:\/\/codemyui.com\/tag\/email-signup-forms\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/02\/single-field-email-registration-form-with-validation.gif?fit=440%2C220&ssl=1&resize=350%2C250","width":350,"height":250},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/14347","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=14347"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/14347\/revisions"}],"predecessor-version":[{"id":25849,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/14347\/revisions\/25849"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/14352"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=14347"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=14347"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=14347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}