Create a very modern hover on a link

Here's how to easily create a very modern hover effect on a link! There are many possible effects on buttons and links: the more successful they are, the more your users will want to click on them.

You can find the entire tutorial on our Instagram account.

Step 1

Let's start with the HTML code.

<a href="#">Read the Article</a>

So simple that we can skip the explanations. You can also use a class instead of directly selecting the a tag.

Step 2

Now we need to style our link to start giving it some style.

a {
  text-decoration: none;
  color: black;
  font-size: 1.4em;
  position: relative;
  padding: 0 15px;
  transition: .2s all;
  font-weight: 300;
}

Step 3

Let's add a small border before the text, using the ::before selector, which allows us to apply various properties to a space that is located before the element.

a::before {
  content: '';
  position: absolute;
  background: #4cd3c2;
  width: 2px;
  height: 100%;
  left: 0;
  transition: .2s all;
  z-index: -1;
}

By using the content property, we enable the display of the border, because otherwise the browser will display nothing, as the element is empty.

We then define the border with position absolute. Thanks to the position relative set on the link (a), the border will adapt to the link and not to the page.

Finally, we give it a z-index of -1 so that the border is hidden beneath the text in the next step.

Step 4

Let's make it dynamic!

a:hover::before {
  width: 100%;
}
a:hover {
  color: #ffffff;
  font-size: 1.6em;
}