6 Creative Ideas for CSS Link Hover Effects

Adding some CSS link hover effect to ordinary web pages can enhance the visual appeal of web pages. If you've ever had a hard time trying to create cool hover effects, this article will give you six CSS effects that you can use directly for your next project.

Let's get started!

I know we're talking about :hover , but sometimes (maybe not always) it's a good idea to include :focus as well, because not all interactions come directly from the mouse, but maybe a click or a key press.

Slide highlight link hover effect

This effect applies a box shadow for inline links while changing the color of the link text. We first add a surrounding padding for the link and then add a negative margin of the same value to prevent the padding from breaking the text stream.

We will use box-shadow instead of background property, as it allows us to make transitions.

 a {
  box-shadow: inset 0 0 0 https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6;
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6;
  margin: 0 -.25rem;
  padding: 0 .25rem;
  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
a:hover {
  box-shadow: inset 100px 0 0 0 https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6;
  color: white;
}

Copy after login

Text switch link hover effect

This is an interesting effect where we can swap the linked text with other text when hovering. Hover over the text, the link text will slide out and new text will slide in.

Demos are easier to understand than description.

This link hover effect contains a lot of tricks. But the magic is that it uses data attributes to define the slide in text and calls it using content attribute of the linked ::after pseudo-element.

First, HTML tags:

<p> Hover <a data-replace="get a link" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">get a link</a></p>

Copy after login

This is a lot of inline tags, but what you see is a paragraph tag that contains links and spans.

Let's add some basic styles to the link. We need to provide it with relative positioning to keep the pseudo-element (will be absolutely positioned) in place, make sure it is displayed as an inline block to get the convenience of box element styles, and hide any overflows that the pseudo-element can cause.

 a {
  overflow: hidden;
  position: relative;
  display: inline-block;
}

Copy after login

::before and ::after pseudo-elements should have some absolute positioning so that they are stacked with the actual link. We will make sure they are set to the full width of the link with zero left position offset, ready for some sliding operations.

 a::before,
a::after {
 content: '';
  position: absolute;
  width: 100%;
  left: 0;
}

Copy after login

::after pseudo-element gets content from the link data attribute in the HTML tag:

 a::after {
  content: attr(data-replace);
}

Copy after login

Now we can use transform: translate3d() to move ::after pseudo-element 200% to the right. We move it back to its original position on :hover . By the way, we can set a zero offset for it in the top direction. This will be very important when we use ::before pseudo-element later like text underscores.

 a::after {
  content: attr(data-replace);
  top: 0;
  transform-origin: 100% 50%;
  transform: translate3d(200%, 0, 0);
}

a:hover::after,
a:focus::after {
  transform: translate3d(0, 0, 0);
}

Copy after login

We will also convert transform: scale() ::before pseudo-element to hide it by default, and then scale it back on :hover . We will make it smaller in height, for example 2px, and pin it to the bottom so that it looks like a text underscore, which will be swapped with ::after .

 a::before {
  background-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6;
  height: 2px;
  bottom: 0;
  transform-origin: 100% 50%;
  transform: scaleX(0);
}

a:hover::before,
a:focus::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}

Copy after login

The rest are preferences! We add a transition to the conversion effect, some colors, etc. to get the full effect. These values are entirely up to you.

View the full CSS code

```css a { overflow: hidden; position: relative; display: inline-block; }

a::before, a::after { content: ''; position: absolute; width: 100%; left: 0; } a::before { background-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6; height: 2px; bottom: 0; transform-origin: 100% 50%; transform: scaleX(0); transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1); } a::after { content: attr(data-replace); height: 100%; top: 0; transform-origin: 100% 50%; transform: translate3d(200%, 0, 0); transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1); color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6; }

a:hover::before { transform-origin: 0% 50%; transform: scaleX(1); } a:hover::after { transform: translate3d(0, 0, 0); }

a span { display: inline-block; transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1); }

a:hover span { transform: translate3d(-200%, 0, 0); }

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b Growth background link hover effect This is a very popular effect I have seen in many places. The idea is to use the link's `::before` pseudo-element as a thick underscore, which is slightly behind the actual text of the link. Then, on hover, the pseudo-element expands to cover the entire content.

OK, some basic styles for links. We don't need text decor, because `::before` will act as text decor, followed by some relative positioning to keep `::before` in place when giving absolute positioning.

```css
a {
  text-decoration: none;
  position: relative;
}

Copy after login

Now let's set ::before so that its height is about 8px so that it looks like a thick underscore. We will also give it absolute positioning so that we can control the full width of making it the actual link while offsetting it so that it is on the left and just a little bit from the bottom, making it look like it is highlighting the link subtly. You might as well set it to z-index: -1 , which makes sure it is behind the link.

 a::before {
  content: '';
  background-color: hsla(196, 61%, 58%, .75);
  position: absolute;
  left: 0;
  bottom: 3px;
  width: 100%;
  height: 8px;
  z-index: -1;
}

Copy after login

very good. Let's make it look like ::before is growing when hovering the link. We just need to change the height from 3px to 100%. Note that I also restored the bottom offset to zero so that the background covers more space as it grows.

 a:hover::before {
  bottom: 0;
  height: 100%;
}

Copy after login

Now add a slight transition to these changes:

 a::before {
  content: '';
  background-color: hsla(196, 61%, 58%, .75);
  position: absolute;
  left: 0;
  bottom: 3px;
  width: 100%;
  height: 8px;
  z-index: -1;
  transition: all .3s ease-in-out;
}

Copy after login

View the full CSS code

```css a { text-decoration: none; color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b18272F; font-weight: 700; position: relative; }

a::before { content: ''; background-color: hsla(196, 61%, 58%, .75); position: absolute; left: 0; bottom: 3px; width: 100%; height: 8px; z-index: -1; transition: all .3s ease-in-out; }

a:hover::before { bottom: 0; height: 100%; }

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b Color swap link hover effect from right to left I personally like to use this effect in links in navigation. The link starts with a color without underscore. Then, on hover, a new color slides in from the right and the underscore slides in from the left.

Very neat, right? There are a lot of actions out there, so you may want to consider accessibility impact and include everything in the preferreds-reduced-motion query to replace with more nuanced content for those who are sensitive to movement.

Here is how it works. We provide a linear background gradient for the link with a hard stop between the two colors halfway through.

```css
a {
  background-image: linear-gradient(
    to right,
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6,
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6 50%,
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000 50%
  );
}

Copy after login

We set the background to twice the width of the link, or 200% and position it completely to the left. In this way, it seems that only one of the two colors of the gradient is displayed.

 a {
  background-image: linear-gradient(
    to right,
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6,
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6 50%,
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000 50%
  );
  background-size: 200% 100%;
  background-position: -100%;
}

Copy after login

Magic things happen when we use several non-standard -webkit- prefix properties. One removes the color from the text to make it transparent. Another clips the background gradient to the text, so the text actually seems to be the color of the background.

 a {
  background-image: linear-gradient(
    to right,
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6,
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6 50%,
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000 50%
  );
  background-size: 200% 100%;
  background-position: -100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Copy after login

Still following? Now let's create a pseudo-underscore of the link by using ::before . We will give it the same color as the hidden part of the link background gradient and position it below the actual link so that it looks like a correct text-decoration: underline .

 a:before {
  content: '';
  background: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6;
  display: block;
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 3px;
}

Copy after login

On hover we slide ::before into place and enter from the left:

 a:hover {
 background-position: 0;
}

Copy after login

Now, this is a little tricky. On hover, we set the linked ::before pseudo-element to 100% of the link width. If we apply this directly to the hover of the link, we will make the link itself full width, which will move it around the screen. oops!

 a:hover::before {
  width: 100%;
}

Copy after login

Add a little transition to make things go smoothly:

 a {
  background-image: linear-gradient(
    to right,
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6,
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6 50%,
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000 50%
  );
  background-size: 200% 100%;
  background-position: -100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.3s ease-in-out;
}

Copy after login

View the full CSS code

```css a { background-image: linear-gradient( to right,

54b3d6,

 <code>https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6 50%, https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000 50%</code>

Copy after login

); background-size: 200% 100%; background-position: -100%; display: inline-block; padding: 5px 0; position: relative; -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: all 0.3s ease-in-out; }

a:before { content: ''; background: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6; display: block; position: absolute; bottom: -3px; left: 0; width: 0; height: 3px; transition: all 0.3s ease-in-out; }

a:hover { background-position: 0; }

a:hover::before { width:100%; }

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b Rainbow Underline Link Hover Effect We cannot use `text-decoration-color: rainbow`, but we can fake it by mixing linear gradients and background magic.

First, we delete the link's `text-decoration`:

```css
a {
  text-decoration: none;
}

Copy after login

Now it's a gradient. We link two linear gradients on the same background property. A gradient is the initial color before hovering. The second is the rainbow at hover.

 a {
  background:
    linear-gradient(
      to right,
      rgba(100, 200, 200, 1),
      rgba(100, 200, 200, 1)
    ),
    linear-gradient(
      to right,
      rgba(255, 0, 0, 1),
      rgba(255, 0, 180, 1),
      rgba(0, 100, 200, 1)
  );
}

Copy after login

Let's make the background size just 3px high so that it looks like, you know, underlined. We can adjust the size of the two gradients on background-size property at the same time so that the initial gradient is full width and 3px height, while the rainbow has zero width.

 a {
  background:
    linear-gradient(
      to right,
      rgba(100, 200, 200, 1),
      rgba(100, 200, 200, 1)
    ),
    linear-gradient(
      to right,
      rgba(255, 0, 0, 1),
      rgba(255, 0, 180, 1),
      rgba(0, 100, 200, 1)
  );
  background-size: 100% 3px, 0 3px;
}

Copy after login

Now we can position the background gradient on background-position property at the same time so that the first gradient is fully visible and the rainbow is pushed out of view. Oh, let's make sure the background doesn't repeat when used.

 a {
  background:
    linear-gradient(
      to right,
      rgba(100, 200, 200, 1),
      rgba(100, 200, 200, 1)
    ),
    linear-gradient(
      to right,
      rgba(255, 0, 0, 1),
      rgba(255, 0, 180, 1),
      rgba(0, 100, 200, 1)
  );
  background-size: 100% 3px, 0 3px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
}

Copy after login

Let's update background-size on hover so that the gradient swap value:

 a:hover {
  background-size: 0 3px, 100% 3px;
}

Copy after login

Finally, make a little transition when the hover occurs:

 a {
  background:
    linear-gradient(
      to right,
      rgba(100, 200, 200, 1),
      rgba(100, 200, 200, 1)
    ),
    linear-gradient(
      to right,
      rgba(255, 0, 0, 1),
      rgba(255, 0, 180, 1),
      rgba(0, 100, 200, 1)
  );
  background-size: 100% 3px, 0 3px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;
}

Copy after login

Look!

Hover effect by underscore link

Geoff Graham actually introduced this effect when he recently analyzed the cool hover effect of Adam Argyle. In his demo, the background color behind the link enters from the left and exits from the right as the mouse moves out.

My version simplifies the background to be more like underscore.

 a {
  position: relative;
}

a::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    border-radius: 4px;
    background-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b18272F;
    bottom: 0;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
  }

a:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}

Copy after login

This is not the only way to achieve this! Here is another way Justin Wong uses the background:

Geoff also offers a range of CSS link hover effects, from neat to totally ridiculous. Worth a look! For useful content on link and button styles, check out Philip Zastrow's tutorial on DigitalOcean.

Just link!

There are many options to create your own hover effect for inline links using CSS. You can even play around with these effects and create new effects. I hope you enjoyed this article. Keep trying!

The above is the detailed content of 6 Creative Ideas for CSS Link Hover Effects. For more information, please follow other related articles on the PHP Chinese website!