Get best of the week

Pure CSS: 4 methods for animating link colors

The author of the article, the translation of which we publish today, proposes, using pure CSS, to create a mechanism for changing the color of the link text when you hover over it. But this should not be an ordinary color change. The new color should fill the link from left to right, replacing the old one.


In order to do this, you can resort to one of the four methods described in this material. Consider these methods, paying particular attention to various important things like content accessibility, solution performance, and browser support.

Method # 1: using background-clip: text


At the time of this writing, the background-clip: text property is experimental. It is not supported in Internet Explorer 11 and below. This method involves creating the so-called “ knockout text ” (text that looks like it is cut out in a certain surface and the background is translucent from it) with a sharp gradient . HTML markup consists of a single element <a>that describes a hyperlink.

<a href="#">Link Hover</a>

Let's start by creating styles for the link. Using overflow: hiddenwill lead to the fact that when you change the appearance of the link, everything that is beyond the scope of this element is cut off.

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

We will need to use a sharp linear gradient with a value of 50% for the start and end colors of the link.

a {
  /*  ,    */
  background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);
}

Use the property background-clipto trim the gradient. Let's give it a value textfor displaying text. We will use the properties of background-sizeand background-position. This is done to display the initial color.

a {
  /*  ,    */
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
}

And finally, add a CSS property to the style and style the transitionhyperlink pseudo-class :hover. In order for the new color to fill the link from left to right when you hover over the link, use the property background-position.

a {
  /*  ,    */
  transition: background-position 275ms ease;
}
a:hover {
  background-position: 0 100%;
}

Here is an example on CodePen. Although this technique allows you to achieve the desired effect, Safari and Chrome trimmed text and shadow elements. This means that they will not be shown. Applying text styles such as underlining text using the CSS property text-decorationwill not work. Therefore, if you want links to be underlined, you should consider other ways to customize the underline .


Method # 2: applying width / height


This method is based on the use of the data- * attribute containing the same text as the tag <a>. Here you use property management width(to fill the link with color from left to right or right to left) or property height(to apply the effect from top to bottom or from bottom to top). For example, in our case, an effect is applied to a property width, which, when you mouse over a link, changes from 0 to 100%. Here is the markup:

<a href="#" data-content="Link Hover">Link Hover</a>

The CSS is similar to the one used in the previous example, except for the background property settings. Here, in addition, the property will work fine text-decoration:

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  color: royalblue;
  font-weight: 800;
  text-decoration: underline;
  overflow: hidden;
}

This is where we need to use the text from the attribute data-content. This text will be placed on top of the tag content <a>. We can use an interesting little trick here, which consists in copying text from an attribute and in deriving it using a function attr()in the property of a contentpseudo-element of a link ::before.

a::before {
  position: absolute;
  content: attr(data-content); /*    */
  top: 0;
  left: 0;
  color: midnightblue;
  text-decoration: underline;
  overflow: hidden;
  transition: width 275ms ease;
}

In order for the text to not jump to a new line, a style will be applied to the pseudo-element white-space: nowrap. To change the color of the link, set the value of the CSS property of the colorpseudo - element ::beforeand make it so that at the beginning the value of the property is width0:

a::before {
  /*  ,    */
  width: 0;
  white-space: nowrap;
}

Increase the value of the widthpseudo-element ::beforeto 100% to apply the effect when you hover over the mouse link:

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

Here is an example of the application of this method. Although we, acting on the properties of the element widthand heightachieve what we need, this method is notable for its low productivity . In order to get a smooth color change at 60 frames per second - it is better to use the properties transformor. opacityUsing the property text-decorationallows you to use various styles of emphasizing text in animated links. Here is an example that demonstrates this, created using the third technique, which we will now consider. It is based on the use of the CSS property of clip-path .



Method 3: using clip-path


Here we will use the CSS property clip-pathand the polygon, in this case, the rectangle. The rectangle has four corners, the length of two of its sides increases when you hover over the link. The figure expands, one of its sides moves from left to right.


It uses the same markup as in the previous example:

<a href="#" data-content="Link Hover">Link Hover</a>

We, again, will use the pseudo-element ::before. But the CSS is different here:

a::before {
  position: absolute;
  content: attr(data-content);
  color: midnightblue;
  text-decoration: underline;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path 275ms ease;
}

Unlike the previous method, here the property text-decoration: underlinemust be set for the pseudo-element ::before. This is necessary so that the color change affects not only the text of the link, but also the line that underlines the link. Now let's look at the CSS-code of the property clip-path:

clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);

The positions of the vertices of the polygon in the property are clip-pathspecified as a percentage, they determine the coordinates in the order corresponding to their placement on the polygon:

  • 0 0 = upper left corner
  • 0 0 = upper right corner
  • 0 100% = lower right corner
  • 0 100% = bottom left corner

The direction of application of the filling effect can be changed by modifying the coordinates. Now that we know the coordinates, we can make the figure grow by moving from left to right when you hover over the mouse link:

a:hover::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

Here's a working version of this example. This technique of animating link colors works very well, but before using it, consider the support of the property in clip-pathdifferent browsers. Creating CSS transitions using clip-pathis better than using the height / width technique. However, its use leads to the fact that the browser performs very resource-intensive Paint operations (drawing).

Method # 4: using transform


The markup that is used here uses the element masking technique <span>. Since we will use <span>content that duplicates the content of the link in the element , we will use the attribute to improve the availability of content aria-hidden="true". This will hide repeating text from screen readers.

Such text will not be voiced twice:

<a href="#"><span data-content="Link Hover" aria-hidden="true"></span>Link Hover</a>

The CSS for the element <span>contains a description of the transition, which begins on the left:

span {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  transform: translateX(-100%);
  transition: transform 275ms ease;
}

Now you need to organize the movement of the element <span>to the right, looking as shown below.


In order to do this, use the ::beforeelement pseudo- element <span>. And, as before, we will resort to using the attribute data-content. Let us change the position of the element, applying a transformation transform: translateX(100%), moving it along the axis X.

span::before { 
  display: inline-block;
  content: attr(data-content);
  color: midnightblue;
  transform: translateX(100%);
  transition: transform 275ms ease;
  text-decoration: underline;
}

As with the element <span>, the position of the pseudo-element ::beforewill be set using the construction transform: translateX(0):

a:hover span::before {
  transform: translateX(0);
}

Here is an example on CodePen. Although this method has the best cross-browser support of the above, it needs more HTML and CSS to implement it. Nevertheless, the use of CSS-properties transform does not harm performance , its use does not cause redrawing of elements, and, as a result, leads to the formation of smooth CSS transitions at 60 frames per second.


Summary


We just looked at four different methods to achieve the same effect using CSS. Although each of them has its pros and cons, you can see that there is nothing impossible in organizing the animation of the text color of the links when you hover over them. This is a small pleasant effect, the use of which leads to the fact that links are perceived as more interactive.

Dear readers! Do you animate links in your projects?

More articles:


All Articles