{"id":19828,"date":"2017-06-29T00:35:03","date_gmt":"2017-06-28T14:35:03","guid":{"rendered":"https:\/\/codemyui.com\/?p=19828"},"modified":"2018-05-16T16:42:48","modified_gmt":"2018-05-16T06:42:48","slug":"animated-gradient-button-hover-effect","status":"publish","type":"post","link":"https:\/\/codemyui.com\/animated-gradient-button-hover-effect\/","title":{"rendered":"Animated Gradient Button Hover Effect"},"content":{"rendered":"<p>This is a fancy <a href=\"https:\/\/codemyui.com\/tag\/button\/\">button<\/a> with an animated <a href=\"https:\/\/codemyui.com\/tag\/gradient\/\">gradient effect<\/a>. The pure CSS <a href=\"https:\/\/codemyui.com\/tag\/hover-animation\/\">hover effect<\/a> for this button was designed by <a href=\"https:\/\/twitter.com\/chrismcolvin\" target=\"_blank\" rel=\"noopener\">Chris Colvin<\/a>. <\/p>\n<p><!--more--><\/p>\n<p>If you are having trouble with the pen, try the archived copy on <a href=\"https:\/\/gist.github.com\/CodeMyUI\/8064fd1f5a0dabfcfc05f936b95c648e\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<h2>Gradient Button Snippet<\/h2>\n<p class='codepen'  data-height='385' data-theme-id='0' data-slug-hash='XRReER' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen Gradient Hover Effect by Chris Colvin (@chrismcolvin) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>This is a fancy button with an animated gradient effect. The pure CSS hover effect for this button was designed by Chris Colvin.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/animated-gradient-button-hover-effect\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":19837,"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,751135,192416248,30305495],"class_list":["post-19828","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-button","tag-gradient","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\/2017\/06\/animated-gradient-button-hover-effect.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":29336,"url":"https:\/\/codemyui.com\/angled-gradient-button-hover-effect-in-pure-css\/","url_meta":{"origin":19828,"position":0},"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":12286,"url":"https:\/\/codemyui.com\/pure-css-gradient-button-hover-effect\/","url_meta":{"origin":19828,"position":1},"title":"Pure CSS Gradient Button with Hover Effect","author":"Hima Vincent","date":"March 1, 2017","format":false,"excerpt":"If you are looking for some modern buttons for your next landing page, these gradient buttons in pure CSS by Gianluca Pirrera might be just the thing for you. You can change the direction of the background change in the :hover state. If you are having trouble with the pen,\u2026","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Pure CSS Gradient Button with Hover Effect","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/pure-css-gradient-button-with-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\/03\/pure-css-gradient-button-with-hover-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/pure-css-gradient-button-with-hover-effect.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/pure-css-gradient-button-with-hover-effect.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26854,"url":"https:\/\/codemyui.com\/gradient-buttons-with-glint-on-hover\/","url_meta":{"origin":19828,"position":2},"title":"Gradient Buttons With Glint on Hover","author":"Saijo George","date":"September 20, 2018","format":false,"excerpt":"Check out this colourful collection of buttons with gradient styling and a glint effect on hover. These pure CSS buttons were designed by Muhammed Erdem. If you are having trouble with the pen, try the archived copy on GitHub Buttons With Glint Snippet","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Gradient Buttons With Glint on Hover","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/09\/Gradient-Buttons-With-Glint-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\/2018\/09\/Gradient-Buttons-With-Glint-on-Hover.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/09\/Gradient-Buttons-With-Glint-on-Hover.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/09\/Gradient-Buttons-With-Glint-on-Hover.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":30123,"url":"https:\/\/codemyui.com\/multiple-modern-gradient-button-hover-animation\/","url_meta":{"origin":19828,"position":3},"title":"Multiple Modern Gradient Button Hover Animation","author":"Saijo George","date":"October 15, 2020","format":false,"excerpt":"Code by: Yuhomyan If you are having trouble with the pen, try the archived copy on GitHub Button Hover Snippet","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Multiple Modern Gradient Button Hover Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/10\/Multiple-Modern-Gradient-Button-Hover-Animation.gif?fit=764%2C380&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/10\/Multiple-Modern-Gradient-Button-Hover-Animation.gif?fit=764%2C380&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/10\/Multiple-Modern-Gradient-Button-Hover-Animation.gif?fit=764%2C380&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/10\/Multiple-Modern-Gradient-Button-Hover-Animation.gif?fit=764%2C380&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":15625,"url":"https:\/\/codemyui.com\/gradient-ghost-button-hover-effect\/","url_meta":{"origin":19828,"position":4},"title":"Gradient Ghost Button Hover Effect","author":"Hima Vincent","date":"May 9, 2017","format":false,"excerpt":"If you want to use a ghost button on your next website you are in luck, have a look at this button that has a gradient effect on hover. It was designbed by Envato Tuts+ If you are having trouble with the pen, try the archived copy on GitHub Gradient\u2026","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Gradient Ghost Button","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/gradient-ghost-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\/gradient-ghost-button.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/gradient-ghost-button.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/gradient-ghost-button.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29198,"url":"https:\/\/codemyui.com\/gradient-button-with-a-gleam-effect\/","url_meta":{"origin":19828,"position":5},"title":"Gradient Button with a Gleam Effect","author":"Saijo George","date":"January 10, 2020","format":false,"excerpt":"Here is a spectacular button that has a pretty gradient effect and on hover, you have a gleaming effect and the colour changes as well. This CSS only button was designed by Ann H. If you are having trouble with the pen, try the archived copy on GitHub Shiny Button\u2026","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Gradient Button with a Gleam Effect","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Gradient-Button-with-a-Gleam-Effect.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\/Gradient-Button-with-a-Gleam-Effect.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Gradient-Button-with-a-Gleam-Effect.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Gradient-Button-with-a-Gleam-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\/19828","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=19828"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/19828\/revisions"}],"predecessor-version":[{"id":25773,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/19828\/revisions\/25773"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/19837"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=19828"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=19828"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=19828"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}