{"id":2988,"date":"2022-01-25T12:22:30","date_gmt":"2022-01-25T12:22:30","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=2988"},"modified":"2023-06-12T14:34:45","modified_gmt":"2023-06-12T14:34:45","slug":"7-creative-ideas-for-css-link-hover-effects","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/7-creative-ideas-for-css-link-hover-effects\/","title":{"rendered":"CSS Tutorial &#8211; 7 Creative Ideas for CSS Link Hover Effects"},"content":{"rendered":"<p><span style=\"color: #ef3207;\"><a style=\"color: #ef3207;\" href=\"https:\/\/rengga.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Rengga Dev<\/strong><\/a> <\/span>&#8211; Creating CSS link hover effects can add a bit of flair to an otherwise bland webpage. If you\u2019ve ever found yourself stumped trying to make a slick hover effect, then I have six CSS effects for you to take and use for your next project.<\/p>\n<p>Let\u2019s get right to it!<\/p>\n<h2 id=\"the-sliding-highlight-link-hover-effect\">1.The Sliding Highlight Link Hover Effect<\/h2>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;a href=\"#\"&gt;Hover this link&lt;\/a&gt;<\/pre>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">a {\r\n  box-shadow: inset 0 0 0 0 #54b3d6;\r\n  color: #54b3d6;\r\n    padding: 0 .25rem;\r\n    margin: 0 -.25rem;\r\n  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;\r\n}\r\na:hover {\r\n  color: #fff;\r\n  box-shadow: inset 200px 0 0 0 #54b3d6;;\r\n}\r\n\r\n\/* Presentational styles *\/\r\na {\r\n    color: #54b3d6;\r\n  font-family: 'Poppins', sans-serif;\r\n  font-size: 27px;\r\n    font-weight: 700;\r\n  line-height: 1.5;\r\n  text-decoration: none;\r\n}\r\n\r\nbody {\r\n    display: grid;\r\n  height: 100vh;\r\n    place-items: center;\r\n}<\/pre>\n<p><iframe style=\"width: 100%;\" title=\"The Sliding Highlight Link Hover Effect\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/rNdqOrL?default-tab=result&amp;theme-id=dark\" height=\"300\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/rNdqOrL\"><br \/>\nThe Sliding Highlight Link Hover Effect<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<h3><\/h3>\n<h2 id=\"the-text-swappin-link-hover-effect\">2.The Text Swappin\u2019 Link Hover Effect<\/h2>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;p&gt;Hover &lt;a href=\"#\" id=\"style-2\" data-replace=\"this link\"&gt;&lt;span&gt;this link&lt;\/span&gt;&lt;\/a&gt;&lt;\/p&gt;<\/pre>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">a {\r\n  overflow: hidden;\r\n  position: relative;\r\n  display: inline-block;\r\n}\r\n\r\na::before,\r\na::after {\r\n content: '';\r\n  position: absolute;\r\n  width: 100%;\r\n  left: 0;\r\n}\r\na::before {\r\n  background-color: #54b3d6;\r\n  height: 2px;\r\n  bottom: 0;\r\n  transform-origin: 100% 50%;\r\n  transform: scaleX(0);\r\n  transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);\r\n}\r\na::after {\r\n  content: attr(data-replace);\r\n  height: 100%;\r\n  top: 0;\r\n  transform-origin: 100% 50%;\r\n  transform: translate3d(200%, 0, 0);\r\n  transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);\r\n  color: #54b3d6;\r\n}\r\n\r\na:hover::before {\r\n  transform-origin: 0% 50%;\r\n  transform: scaleX(1);\r\n}\r\na:hover::after {\r\n  transform: translate3d(0, 0, 0);\r\n}\r\n\r\na span {\r\n  display: inline-block;\r\n  transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);\r\n}\r\n\r\na:hover span {\r\n  transform: translate3d(-200%, 0, 0);\r\n}\r\n\r\n\/* Presentational Styles *\/\r\nbody {\r\n    display: grid;\r\n  font-family: 'Poppins', sans-serif;\r\n  font-size: 27px;\r\n    line-height: 1.5;\r\n  height: 100vh;\r\n    place-items: center;\r\n}\r\n\r\na {\r\n    text-decoration: none;\r\n    color: #18272F;\r\n    font-weight: 700;\r\n    vertical-align: top;\r\n}<\/pre>\n<p><iframe style=\"width: 100%;\" title=\"The Text Swappin\u2019 Link Hover Effect\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/qBoJOMP?default-tab=result&amp;theme-id=dark\" height=\"300\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/qBoJOMP\"><br \/>\nThe Text Swappin\u2019 Link Hover Effect<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<h2><\/h2>\n<h2 id=\"the-growing-background-link-hover-effect\">3.The Growing Background Link Hover Effect<\/h2>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;p&gt;Hover this &lt;a href=\"#\"&gt;cool&lt;\/a&gt; link.&lt;\/p&gt;<\/pre>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">a {\r\n    text-decoration: none;\r\n    color: #18272F;\r\n    font-weight: 700;\r\n  position: relative;\r\n}\r\n\r\na::before {\r\n  content: '';\r\n  background-color: hsla(196, 61%, 58%, .75);\r\n  position: absolute;\r\n  left: 0;\r\n  bottom: 3px;\r\n  width: 100%;\r\n  height: 8px;\r\n  z-index: -1;\r\n  transition: all .3s ease-in-out;\r\n}\r\n\r\na:hover::before {\r\n  bottom: 0;\r\n  height: 100%;\r\n}\r\n\r\n\/* Presentational Styles *\/\r\nbody {\r\n    display: grid;\r\n  font-family: 'Poppins', sans-serif;\r\n  font-size: 27px;\r\n    line-height: 1.5;\r\n  height: 100vh;\r\n    place-items: center;\r\n}\r\n<\/pre>\n<p><iframe style=\"width: 100%;\" title=\"The Growing Background Link Hover Effect\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/bGvmVmy?default-tab=result&amp;theme-id=dark\" height=\"300\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/bGvmVmy\"><br \/>\nThe Growing Background Link Hover Effect<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<h2><\/h2>\n<h2 id=\"the-right-to-left-color-swap-link-hover-effect\">4.The Right-to-Left Color Swap Link Hover Effect<\/h2>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;a href=\"\"&gt;Hover This Link&lt;\/a&gt;<\/pre>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">a {\r\n  background-image: linear-gradient(\r\n    to right,\r\n    #54b3d6,\r\n    #54b3d6 50%,\r\n    #000 50%\r\n  );\r\n  background-size: 200% 100%;\r\n  background-position: -100%;\r\n  display: inline-block;\r\n  padding: 5px 0;\r\n  position: relative;\r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n  transition: all 0.3s ease-in-out;\r\n}\r\n\r\na:before{\r\n  content: '';\r\n  background: #54b3d6;\r\n  display: block;\r\n  position: absolute;\r\n  bottom: -3px;\r\n  left: 0;\r\n  width: 0;\r\n  height: 3px;\r\n  transition: all 0.3s ease-in-out;\r\n}\r\n\r\na:hover {\r\n background-position: 0;\r\n}\r\n\r\na:hover::before{\r\n  width: 100%;\r\n}\r\n\r\n\/* Presentational Styles *\/\r\nbody {\r\n    display: grid;\r\n  font-family: 'Poppins', sans-serif;\r\n  font-size: 27px;\r\n  font-weight: 700;\r\n  height: 100vh;\r\n    place-items: center;\r\n}<\/pre>\n<p><iframe style=\"width: 100%;\" title=\"The Right-to-Left Color Swap Link Hover Effect\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/gOeBaQQ?default-tab=result&amp;theme-id=dark\" height=\"300\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/gOeBaQQ\"><br \/>\nThe Right-to-Left Color Swap Link Hover Effect<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<h2><\/h2>\n<h2 id=\"the-rainbow-underline-link-hover-effect\">5.The Rainbow Underline Link Hover Effect<\/h2>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;a href=\"#\"&gt;Hover this link&lt;\/a&gt;<\/pre>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">a {\r\n  color: inherit;\r\n  text-decoration: none;\r\n}\r\n\r\na {\r\n  background:\r\n    linear-gradient(\r\n      to right,\r\n      rgba(100, 200, 200, 1),\r\n      rgba(100, 200, 200, 1)\r\n    ),\r\n    linear-gradient(\r\n      to right,\r\n      rgba(255, 0, 0, 1),\r\n      rgba(255, 0, 180, 1),\r\n      rgba(0, 100, 200, 1)\r\n  );\r\n  background-size: 100% 3px, 0 3px;\r\n  background-position: 100% 100%, 0 100%;\r\n  background-repeat: no-repeat;\r\n  transition: background-size 400ms;\r\n}\r\n\r\na:hover {\r\n  background-size: 0 3px, 100% 3px;\r\n}\r\n\r\n\/* Presentational Styles *\/\r\nbody {\r\n    display: grid;\r\n  font-family: 'Poppins', sans-serif;\r\n  font-size: 27px;\r\n  font-weight: 700;\r\n  height: 100vh;\r\n    place-items: center;\r\n}<\/pre>\n<p><iframe style=\"width: 100%;\" title=\"The Rainbow Underline Link Hover Effect\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/mdxzeaz?default-tab=result&amp;theme-id=dark\" height=\"300\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/mdxzeaz\"><br \/>\nThe Rainbow Underline Link Hover Effect<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<h2 id=\"the-passing-underline-link-hover-effect\">6.The Passing Underline Link Hover Effect<\/h2>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;a href=\"#\"&gt;Hover this link&lt;\/a&gt;<\/pre>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">a {\r\n    color: #18272F;\r\n  position: relative;\r\n  text-decoration: none;\r\n}\r\n\r\na::before {\r\n  content: '';\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 4px;\r\n  border-radius: 4px;\r\n  background-color: #18272F;\r\n  bottom: 0;\r\n  left: 0;\r\n  transform-origin: right;\r\n  transform: scaleX(0);\r\n  transition: transform .3s ease-in-out;\r\n}\r\n\r\na:hover::before {\r\n  transform-origin: left;\r\n  transform: scaleX(1);\r\n}\r\n\r\n\/* Presentational Styles *\/\r\nbody {\r\n    display: grid;\r\n  font-family: 'Poppins', sans-serif;\r\n  font-size: 27px;\r\n  font-weight: 700;\r\n  height: 100vh;\r\n    place-items: center;\r\n}<\/pre>\n<p><iframe style=\"width: 100%;\" title=\"The Passing Underline Link Hover Effect\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/LYdgpae?default-tab=result&amp;theme-id=dark\" height=\"300\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/LYdgpae\"><br \/>\nThe Passing Underline Link Hover Effect<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<h2><\/h2>\n<h2 id=\"the-passing-underline-link-hover-effect\">7.Multiline &amp; Underline Link Hover Effect<\/h2>\n<p>That\u2019s not the only way to accomplish this!\u00a0Here\u2019s another one by Justin Wong\u00a0using\u00a0<code>background<\/code>\u00a0instead:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;p&gt;&lt;a href=\"#\"&gt;Multiline&lt;br\/&gt;effect&lt;\/a&gt;&lt;\/p&gt;\r\n&lt;p&gt;&lt;a href=\"#\" class=\"underline\"&gt;Underline&lt;br\/&gt;Version&lt;\/a&gt;&lt;\/p&gt;<\/pre>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">a {\r\n  background: linear-gradient(0deg, slateblue, slateblue) no-repeat right bottom \/ 0 var(--bg-h);\r\n  transition: background-size 350ms;\r\n  --bg-h: 100%;\r\n}\r\na:where(:hover, :focus-visible) {\r\n  background-size: 100% var(--bg-h);\r\n  background-position-x: left;\r\n}\r\n\r\n.underline {\r\n  padding-bottom: 2px;\r\n  --bg-h: 2px;\r\n}\r\n\r\nbody {\r\n  font-size: 2em;\r\n  text-align: center;\r\n}\r\n\r\na {\r\n  text-decoration: none;\r\n  color: inherit;\r\n  line-height: 1;\r\n}<\/pre>\n<p><iframe style=\"width: 100%;\" title=\"Mouse Effect - Multiline Effect &amp; Underline Version\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/yLKRYre?default-tab=result&amp;theme-id=dark\" height=\"300\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/yLKRYre\"><br \/>\nMouse Effect &#8211; Multiline Effect &amp; Underline Version<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<h2><\/h2>\n<h2 id=\"have-a-blast-linking\">Have a blast linking!<\/h2>\n<p>There are a lot of options when it comes to creating your own hover effect for in-line links with CSS. You can even play with these effects and create something new. I hope you liked the article. Keep experimenting!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; Creating CSS link hover effects can add a bit <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/7-creative-ideas-for-css-link-hover-effects\/\" title=\"CSS Tutorial &#8211; 7 Creative Ideas for CSS Link Hover Effects\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3764,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,2],"tags":[253,252,254,103,227],"newstopic":[573,572],"class_list":{"0":"post-2988","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html-css","8":"category-web-design","9":"tag-css-hover","10":"tag-css-link-hover-effects","11":"tag-link-hover-effect","12":"tag-web-design","13":"tag-web-designer","14":"newstopic-css","15":"newstopic-html"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/2988","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=2988"}],"version-history":[{"count":5,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/2988\/revisions"}],"predecessor-version":[{"id":3236,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/2988\/revisions\/3236"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3764"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=2988"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=2988"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=2988"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=2988"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}