{"id":24678,"date":"2017-08-22T11:19:02","date_gmt":"2017-08-22T01:19:02","guid":{"rendered":"https:\/\/codemyui.com\/?p=24678"},"modified":"2018-05-16T16:37:05","modified_gmt":"2018-05-16T06:37:05","slug":"gradient-fill-underline-hover-effect-multiple-lines","status":"publish","type":"post","link":"https:\/\/codemyui.com\/gradient-fill-underline-hover-effect-multiple-lines\/","title":{"rendered":"Gradient Fill Underline Hover Effect on Multiple Lines"},"content":{"rendered":"<p>Have a look at this pretty <a href=\"https:\/\/codemyui.com\/tag\/gradient\/\">gradient effect<\/a>. The underline expands and fills up the text <a href=\"https:\/\/codemyui.com\/tag\/hover-animation\/\">on hover<\/a>, it will look great for <a href=\"https:\/\/codemyui.com\/tag\/link\/\">links<\/a> on your next website, it will work on links that span multiple lines too. It was designed by <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/wking_io\">Will King<\/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\/1742d679c031cfea06948681e24cefd4\" rel=\"noopener\" target=\"_blank\">GitHub<\/a><\/p>\n<h2>Hover Effect on Multiple Lines Snippet<\/h2>\n<p class='codepen'  data-height='472' data-theme-id='0' data-slug-hash='BdmpVx' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen How do I get a custom colored underline that will span multiple lines? by Will King (@Wking) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>Have a look at this pretty gradient effect. The underline expands and fills up the text on hover, it will look great for links on your next website, it will work on links that span multiple lines too. It was designed by Will King.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/gradient-fill-underline-hover-effect-multiple-lines\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":24680,"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":[751135,192416248,2717],"class_list":["post-24678","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-gradient","tag-hover-animation","tag-link","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/08\/gradient-fill-underline-hover-effect-on-multiple-lines.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":24719,"url":"https:\/\/codemyui.com\/pure-css-gradient-underline-hover-animation\/","url_meta":{"origin":24678,"position":0},"title":"Pure CSS Gradient Underline Hover Animation","author":"Hima Vincent","date":"September 19, 2017","format":false,"excerpt":"Use this CSS only snippet designed by Colin Horn to add a really cool gradient link hover effect to your text. When you hover over the text a gradient underline appears slowly from left to right, gradually making its way from the first to the last character, moving fluidly across\u2026","rel":"","context":"In \"gradient\"","block_context":{"text":"gradient","link":"https:\/\/codemyui.com\/tag\/gradient\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/09\/gradient-underline-animation-1.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/09\/gradient-underline-animation-1.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/09\/gradient-underline-animation-1.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/09\/gradient-underline-animation-1.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25044,"url":"https:\/\/codemyui.com\/pure-css-gradient-underline-hover-animation-2\/","url_meta":{"origin":24678,"position":1},"title":"Pure CSS Gradient Underline Hover Animation","author":"Hima Vincent","date":"November 10, 2017","format":false,"excerpt":"A gradient link hover effect designed by Nick Noordijk where the link underline changes colour when you hover over it. If you are having trouble with the pen, try the archived copy on GitHub Link Hover Snippet","rel":"","context":"In \"gradient\"","block_context":{"text":"gradient","link":"https:\/\/codemyui.com\/tag\/gradient\/"},"img":{"alt_text":"Pure CSS Gradient Underline Hover Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/gradient-underline-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\/2017\/11\/gradient-underline-hover-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/gradient-underline-hover-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/gradient-underline-hover-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":27203,"url":"https:\/\/codemyui.com\/gradient-underline-for-link-hover\/","url_meta":{"origin":24678,"position":2},"title":"Gradient Underline for Link Hover","author":"Saijo George","date":"March 24, 2019","format":false,"excerpt":"This is a pure CSS animated gradient underline that you can use on you website to highlight links. If you are having trouble with the pen, try the archived copy on GitHub Gradient Link Snippet","rel":"","context":"In \"gradient\"","block_context":{"text":"gradient","link":"https:\/\/codemyui.com\/tag\/gradient\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/03\/placeholder..png?fit=560%2C315&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/03\/placeholder..png?fit=560%2C315&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/03\/placeholder..png?fit=560%2C315&ssl=1&resize=525%2C375 1.5x"},"classes":[]},{"id":30123,"url":"https:\/\/codemyui.com\/multiple-modern-gradient-button-hover-animation\/","url_meta":{"origin":24678,"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":26661,"url":"https:\/\/codemyui.com\/marker-pen-effect-on-text-animation\/","url_meta":{"origin":24678,"position":4},"title":"Marker Pen Effect On Text Animation","author":"Saijo George","date":"July 12, 2018","format":false,"excerpt":"Here is a bunch of CSS only hover animation mimicking the effect of highlighting text using a marker pen. If you are having trouble with the pen, try the archived copy on GitHub Marker Pen Animation Snippet","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Marker Pen Effect On Text Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Marker-Pen-Effect-On-Text-Animation.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\/Marker-Pen-Effect-On-Text-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Marker-Pen-Effect-On-Text-Animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Marker-Pen-Effect-On-Text-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":24678,"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\/24678","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=24678"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/24678\/revisions"}],"predecessor-version":[{"id":25733,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/24678\/revisions\/25733"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/24680"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=24678"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=24678"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=24678"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}