{"id":15625,"date":"2017-05-09T14:06:48","date_gmt":"2017-05-09T04:06:48","guid":{"rendered":"https:\/\/codemyui.com\/?p=15625"},"modified":"2018-05-16T16:44:16","modified_gmt":"2018-05-16T06:44:16","slug":"gradient-ghost-button-hover-effect","status":"publish","type":"post","link":"https:\/\/codemyui.com\/gradient-ghost-button-hover-effect\/","title":{"rendered":"Gradient Ghost Button Hover Effect"},"content":{"rendered":"<p>If you want to use a ghost <a href=\"https:\/\/codemyui.com\/tag\/button\/\">button<\/a> on your next website you are in luck, have a look at this button that has a <a href=\"https:\/\/codemyui.com\/tag\/gradient\/\">gradient effect<\/a> on <a href=\"https:\/\/codemyui.com\/tag\/hover-animation\/\">hover<\/a>. It was designbed by <a href=\"https:\/\/twitter.com\/tutsplus\" target=\"_blank\" rel=\"noopener\">Envato Tuts+<\/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\/67b05088695f5229c921ef1069d5a7ac\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<h2>Gradient Button Snippet<\/h2>\n<p class='codepen'  data-height='343' data-theme-id='0' data-slug-hash='VeyYxK' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen Weekly Inspiration: Good Gracious, Gradients by Envato Tuts+ (@tutsplus) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>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+<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/gradient-ghost-button-hover-effect\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":15628,"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-15625","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\/05\/gradient-ghost-button.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":4382,"url":"https:\/\/codemyui.com\/premium-ghost-button-slow-gradient-colour-fill\/","url_meta":{"origin":15625,"position":0},"title":"Premium Ghost Button with Slow Gradient Colour Fill","author":"Hima Vincent","date":"November 22, 2016","format":false,"excerpt":"This ghost button has a nice premium look to it and will look great on websites with a dark background. It was designed by Daniel Box. In this snippet links are designed to look like buttons using pure CSS and when you hover over them you get a gradient slowly\u2026","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Premium Ghost Button with Slow Gradient Colour Fill","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/premium-ghost-button-with-slow-gradient-colour-fill.gif?fit=880%2C388&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/premium-ghost-button-with-slow-gradient-colour-fill.gif?fit=880%2C388&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/premium-ghost-button-with-slow-gradient-colour-fill.gif?fit=880%2C388&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/premium-ghost-button-with-slow-gradient-colour-fill.gif?fit=880%2C388&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":19828,"url":"https:\/\/codemyui.com\/animated-gradient-button-hover-effect\/","url_meta":{"origin":15625,"position":1},"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":[]},{"id":26854,"url":"https:\/\/codemyui.com\/gradient-buttons-with-glint-on-hover\/","url_meta":{"origin":15625,"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":29336,"url":"https:\/\/codemyui.com\/angled-gradient-button-hover-effect-in-pure-css\/","url_meta":{"origin":15625,"position":3},"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":15625,"position":4},"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":30123,"url":"https:\/\/codemyui.com\/multiple-modern-gradient-button-hover-animation\/","url_meta":{"origin":15625,"position":5},"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":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/15625","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=15625"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/15625\/revisions"}],"predecessor-version":[{"id":25830,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/15625\/revisions\/25830"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/15628"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=15625"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=15625"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=15625"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}