Make an arrow that expands when hovered over with CSS

Whether you want to entice your users to view your project, read your article, or access a page on your website, presenting your link with an arrow will make it easier to catch your visitors' eyes! Let's discover in this article how to animate this arrow to enhance your readers' experience.

Step 1

Let's start, as usual, with the HTML code.

<a href="https://believemy.com" class="btn">
      <div class="arrow"></div>
      View the website
    </a>

We simply create a link with a class btn.
We then add a div with a class arrow and the text of our link.

Step 2

Let's style the link.

.btn {
      text-decoration: none;
      font-size: 1.4rem;
      color: #ff4754;
      display: flex;
      align-items: center;
    }

We use flexbox (display: flex) to align the arrow and the link text side by side.

Step 3

Now let's take care of the arrow's line.

.btn .arrow {
      margin-right: 1em;
      height: 0.1em;
      width: 1.5em;
      position: relative;
      background: #ff4754;
      transition: all 0.2s;
    }

Here, we simply create the line of our arrow. The end of the arrow will be created using the pseudo-elements ::before and ::after.

Step 4

Let's style the end of our arrow.

.btn .arrow::before,
    .btn .arrow::after {
      content: "";
      position: absolute;
      right: 0;
      top: 0;
      background: #ff4754;
      height: 0.1em;
      width: 0.6em;
    }

We create two elements that will be positioned at the top right of the line we created in the previous step.

Step 5

Let's enlarge the arrow on hover and finish our arrow.

.btn:hover .arrow {
      width: 5em;
    }

Our code is so functional and we have thought it out so well that we just need to set the arrow's line width to 5em so that it automatically enlarges on hover of the link. Congratulations to us!