GitHub<\/a><\/p>\n\nSee the Pen eJNGjQ by Edward Gyngell (@edwardgyngell) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"
A nice download button animation on hover slides two labels up and down. The lower label shows the size of the file and the upper one says\u00a0\u201cclick to begin\u201d. Designed by Edward Gyngell. If you are having trouble with the pen, try the archived copy on GitHub<\/p>\nRead More<\/a>","protected":false},"author":2,"featured_media":514,"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":[94913,192416248,30305495],"class_list":["post-68","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-button","tag-hover-animation","tag-pure-css","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/12\/pure-css-download-button-hover-animation.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":148,"url":"https:\/\/codemyui.com\/pure-css-material-design-button-hover-animation\/","url_meta":{"origin":68,"position":0},"title":"Pure CSS material design button hover animation","author":"Hima Vincent","date":"October 7, 2015","format":false,"excerpt":"Pure CSS material design button with hover and click animation by \u00a0Jon Brennecke 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":"Pure CSS material design button hover animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/pure-css-material-design-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\/10\/pure-css-material-design-button-hover-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/pure-css-material-design-button-hover-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/pure-css-material-design-button-hover-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":114,"url":"https:\/\/codemyui.com\/pure-css-shining-button-hover-animation\/","url_meta":{"origin":68,"position":1},"title":"Pure CSS Shining button Hover Animation","author":"Hima Vincent","date":"October 26, 2015","format":false,"excerpt":"Check out this beautiful button animation with shine effect on hover only using CSS. Designed by Dan Mensinger. 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":"Pure CSS Shining button Hover Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/pure-css-shining-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\/10\/pure-css-shining-button-hover-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/pure-css-shining-button-hover-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/pure-css-shining-button-hover-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":1400,"url":"https:\/\/codemyui.com\/pure-css-sliding-navigation-button-animation\/","url_meta":{"origin":68,"position":2},"title":"Pure CSS Sliding Navigation Button Animation","author":"Hima Vincent","date":"August 4, 2016","format":false,"excerpt":"This is a cool navigation button animation you can use in your web project. When you hover over the small round-edged white tab on the left side of the screen, it will come out as a long white rectangular tab with the navigation name label on it. If you are\u2026","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Pure CSS Sliding Navigation Button Hover Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/pure-css-sliding-navigation-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\/2016\/08\/pure-css-sliding-navigation-button-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/pure-css-sliding-navigation-button-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/pure-css-sliding-navigation-button-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26740,"url":"https:\/\/codemyui.com\/multi-layered-button-hover-effect-in-pure-css\/","url_meta":{"origin":68,"position":3},"title":"Multi Layered Button Hover Effect in Pure CSS","author":"Saijo George","date":"July 31, 2018","format":false,"excerpt":"With this pure CSS script by Raul Dronca you can add a fancy button to your website that has a cool layered effect on hover. If you are having trouble with the pen, try the archived copy on GitHub Multi Layered Button Snippet","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Multi Layered Button Hover Effect in Pure CSS","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Multi-Layered-Button-Hover-Effect-in-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Multi-Layered-Button-Hover-Effect-in-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Multi-Layered-Button-Hover-Effect-in-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Multi-Layered-Button-Hover-Effect-in-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29336,"url":"https:\/\/codemyui.com\/angled-gradient-button-hover-effect-in-pure-css\/","url_meta":{"origin":68,"position":4},"title":"Angled Gradient Button Hover Effect in Pure CSS","author":"Saijo George","date":"January 30, 2020","format":false,"excerpt":"Here is a fancy gradient button hover effect in pure CSS. The buttons are layed out in an angled layout giving it a sense of depth and the illusion of 3D effect. If you are having trouble with the pen, try the archived copy on GitHub Gradient Angled Button Snippet","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Angled Gradient Button Hover Effect in Pure CSS","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Angled-Gradient-Button-Hover-Effect-in-Pure-CSS.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\/Angled-Gradient-Button-Hover-Effect-in-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Angled-Gradient-Button-Hover-Effect-in-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Angled-Gradient-Button-Hover-Effect-in-Pure-CSS.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":68,"position":5},"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":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/68","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=68"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/68\/revisions"}],"predecessor-version":[{"id":26174,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/68\/revisions\/26174"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/514"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=68"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=68"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=68"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}