Exploring Creative CSS Hover Effects for Inline Links

In this tutorial we’re talking about CSS hover effects. And not just any hover effects either! We’re going to create some much more interesting alternatives to the standard inline link effects we’ve all been using for years.

Creative Link Hover Demos

I’ve created a quick demo to show all these link effects; a series of list items arranged with CSS Grid, and in each one I’ll place an inline link which can be styled. Take a look at each one, feel free to fork the demo, and see what you can do with them!

CSS Inline Link Hover Effects

Check out the video, or read on for more explanations!

Global Styles

For all these demos I first set some global styles and variables for the a elements:

/* Variables */
:root {
  --link-1: #D65472;
  --link-2: #37C5F0;
  --link-3: gold;
  --text: #18272F;
  --counter: #30B67D;
}

/* Reset */
a {
	text-decoration: none;
	color: var(--text);
	font-weight: 700;
	vertical-align: top;
}

Hover Effect 1: Background Box Shadow

This effect will swipe a background box shadow across the inline link, changing the color of the link text as it does so.

• We begin by adding some padding all around the link, then to prevent that padding upsetting the flow of the text we add a negative margin of the same value.
• Instead of using the background property we use box-shadow because we can transition it.

#style-1 {
  padding: 0 0.25rem;
  margin: 0 -0.25rem;
  box-shadow: inset 0 0 0 0 var(--link-1);
  transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  color: var(--link-1);
}
#style-1:hover {
  color: white;
  box-shadow: inset 100px 0 0 0 var(--link-1);
}

Hover Effect 2: Animated Underline

Our second effect adds an underline, but animates it from the middle of the text outwards for some extra dynamism.

• The first thing to do is give the anchor a position: relative; because we’ll be using pseudo elements which we want to position on it.
• We use the ::before pseudo element which we position top: 100%; to make it sit along the bottom of the link.
• We use transform: scaleX(); and transition to animate the pseudo element.
• We transition the color of the link too, to match the underline animation.

#style-2 {
  position: relative;
  transition: color 0.3s ease-in-out;
}
#style-2::before {
  content: "";
  position: absolute;
  top: 100%;
  width: 100%;
  height: 3px;
  background-color: var(--link-1);
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}
#style-2:hover {
  color: var(--link-1);
}
#style-2:hover::before {
  transform: scaleX(1);
}

Hover Effect 3: Passing Underline

When you hover over this link you’ll see the underline animate in from the left, then disappear to the right.

• We start again with position: relative; on the parent element because we’ll be working with a pseudo element.
• We style the ::before with some basic rules, including a border-radius: 4px; just to give it a slightly softer look.
• We’ll use the same transition transform idea as the previous demo (transform: scaleX(0);) but we’ll change the transform origins.
• So we begin by setting transform-origin: right; on the ::before element.
• Then on the :hover we use transform-origin: left;.

#style-3 {
  position: relative;
}
#style-3::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background-color: var(--text);
  bottom: 0;
  left: 0;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}
#style-3:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}

Hover Effect 4: Text Replace

This hover effect is the most complex and the first one we’ll change the markup for. We’ll be replacing the link text with whatever we store in a data-attribute on the link.

• Start with the usual position: relative; style on the parent.
• Define basic styles for the ::before and ::after pseudo elements.
• Our ::before element will be the underline.
• The ::after element will hold the text we set in the data-replace="" attribute (which will match the link text). We set this with content: attr(data-replace);.
• We push the ::after element to the right by using transform: translate3d(); (to take advantage of hardware acceleration).
• We also need to make it invisible which we do with an overflow: hidden; in combination with display: inline-block; on the parent.
• On :hover we move the ::after element back into position.
• We wrap the text link in a <span> element, which we then transition out of the link as the ::after element transitions in, and vice versa.

#style-4 {
  overflow: hidden;
  position: relative;
  display: inline-block;
}
#style-4::before, #style-4::after {
  content: "";
  position: absolute;
  width: 100%;
  left: 0;
}
#style-4::before {
  background-color: var(--link-1);
  height: 2px;
  bottom: 0;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform 0.3s cubic-bezier(0.76, 0, 0.24, 1);
}
#style-4:hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}
#style-4::after {
  content: attr(data-replace);
  height: 100%;
  top: 0;
  transform-origin: 100% 50%;
  transform: translate3d(200%, 0, 0);
  transition: transform 0.3s cubic-bezier(0.76, 0, 0.24, 1);
  color: var(--link-1);
}
#style-4:hover::after {
  transform: translate3d(0, 0, 0);
}
#style-4 span {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.76, 0, 0.24, 1);
}
#style-4:hover span {
  transform: translate3d(-200%, 0, 0);
}

Hover Effect 5: Multiple Properties

Let’s make things a little simpler again. This example uses a handful of different properties to give a growing offset background effect.

• Begin with the usual setup styles which we need to manipulate pseudo elements.
• Set a z-index: -1; to send the block behind the link text.
• Offset the ::before element on hover by using a negative margin, and expressing the width as calc(100% + 10px);

#style-5 {
  position: relative;
  font-weight: bold;
}
#style-5::before {
  content: "";
  background-color: var(--link-3);
  position: absolute;
  left: 0.5rem;
  bottom: 5px;
  width: 100%;
  height: 8px;
  z-index: -1;
  transition: all 0.3s ease-in-out;
}
#style-5:hover::before {
  left: -5px;
  bottom: 0;
  height: 100%;
  width: calc(100% + 10px);
}

Hover Effect 6: Multi-Line Gradient

The effects so far work well when the inline links sit on one line, but what if the link spreads across multiple lines? Let’s have a play with an effect which works in that scenario.

• Use a long link to best see the effect for this one.
• We apply a background gradient for the bottom border.
• It looks like this: background-image: linear-gradient(white 50%, var(--link-2) 50%); and gives us a background which is half white, half blue to start with.
• We then use a background-size: auto 175%; to scale the background gradient 175% vertically. This effectively enlarges the whole background, which is aligned to the top edge, cropping much of the blue in the process. In this way we create our underline.
• On hover, we position the background so that it aligns with the bottom of the link instead.

#style-6 {
  background-image: linear-gradient(white 50%, var(--link-2) 50%);
  background-size: auto 175%;
  transition: background 0.3s ease-in-out;
}
#style-6:hover {
  background-position-y: 100%;
}

Conclusion

Nothing beats a good practical tutorial eh? I hope you enjoyed creating these link effects and developing your skills as you progressed through them. Don’t forget you can watch the video at the top of the page for a more visual explanation of these hover effects. Thanks for watching/reading!