GitHub<\/a><\/p>\n\nSee the Pen Delete Button by William Pereira Gasparetto (@GasparettoW) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"
Want a cute little delete button what opens up a confirmation element on hover? check out this little delete button that does just that.Designed by William Pereira Gasparetto.<\/p>\nRead More<\/a>","protected":false},"author":2,"featured_media":0,"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":[1807,94913,192416248],"class_list":["post-199","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-animation","tag-button","tag-hover-animation","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":14535,"url":"https:\/\/codemyui.com\/delete-icon-button-animation\/","url_meta":{"origin":199,"position":0},"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":277,"url":"https:\/\/codemyui.com\/delete-button-concept-with-hover-animation\/","url_meta":{"origin":199,"position":1},"title":"Delete Button Concept with Hover Animation","author":"Saijo George","date":"May 27, 2015","format":false,"excerpt":"Check out this fancy delete button with a nice hover animation by Chris Deacy. When you hover on this button the text slides away and the X symbol becomes more prominent. 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":"Delete Button Concept with Hover Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/05\/delete-button-concept-with-hover-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/05\/delete-button-concept-with-hover-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/05\/delete-button-concept-with-hover-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/05\/delete-button-concept-with-hover-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":63,"url":"https:\/\/codemyui.com\/button-hover-animation\/","url_meta":{"origin":199,"position":2},"title":"Button Hover Animation","author":"Hima Vincent","date":"December 11, 2015","format":false,"excerpt":"Simple buttons that animates to icons on hover. Designed by Zach Schnackel. 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":"Button Hover Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/12\/button-hover-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/12\/button-hover-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/12\/button-hover-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/12\/button-hover-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":1515,"url":"https:\/\/codemyui.com\/link-button-animation-hover\/","url_meta":{"origin":199,"position":3},"title":"Link to Button Animation on Hover","author":"Hima Vincent","date":"August 25, 2016","format":false,"excerpt":"When you hover over this link it transforms into a button, designed by Thomas Vaeth 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":"Link to Button Animation on Hover","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/link-to-button-animation-on-hover.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\/link-to-button-animation-on-hover.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/link-to-button-animation-on-hover.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/link-to-button-animation-on-hover.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":231,"url":"https:\/\/codemyui.com\/button-hover-to-underscore-and-check-box-animation\/","url_meta":{"origin":199,"position":4},"title":"Button hover to underscore and\u00a0check-box animation","author":"Hima Vincent","date":"July 12, 2015","format":false,"excerpt":"These pure CSS buttons animate on hover to transform in to an underscore and to a check-box.\u00a0 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":"Button hover to underscore and check-box animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/button-hover-to-underscore-and-check-box-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/button-hover-to-underscore-and-check-box-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/button-hover-to-underscore-and-check-box-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/button-hover-to-underscore-and-check-box-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":19828,"url":"https:\/\/codemyui.com\/animated-gradient-button-hover-effect\/","url_meta":{"origin":199,"position":5},"title":"Animated Gradient Button Hover Effect","author":"Hima Vincent","date":"June 29, 2017","format":false,"excerpt":"This is a fancy button with an animated gradient effect. The pure CSS hover effect for this button was designed by Chris Colvin. If you are having trouble with the pen, try the archived copy on GitHub Gradient Button Snippet","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Animated Gradient Button Hover Effect","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/06\/animated-gradient-button-hover-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/06\/animated-gradient-button-hover-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/06\/animated-gradient-button-hover-effect.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/06\/animated-gradient-button-hover-effect.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\/199","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=199"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/199\/revisions"}],"predecessor-version":[{"id":26305,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/199\/revisions\/26305"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=199"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=199"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=199"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}