Creating an "Old School" button with CSS

"Old School" but so trendy, let's discover how to create an original and clearly up-to-date button!

Step 1

Let's start with the HTML code.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">

<div class="container">
  <a href="#">Read the article</a>
  <i class="fas fa-arrow-right"></i>
  <div class="bg"></div>
</div>

In this small project, we will use the font-awesome library. It allows us to easily add icons thanks to the fas fa-arrow-right class.

Step 2

Let's use the "Lobster" font from Google Fonts.

@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

We will also use a quite "Old School" font from Google Fonts. This font will give a huge touch to our link.

Step 3

Let's style the .container class and its link.

.container {
  font-size: 2rem;
  color: white;
  position: absolute;
  cursor: pointer;
}

.container a {
  color: white;
  text-decoration: none;
  font-family: 'Lobster', cursive;
}

Step 4

Let's move on to the icon and the button's hover effect.

.container i {
  margin-left: 5px;
  font-size: 1.2rem;
  transition: all .5s;
}

.container a:hover ~ i {
  transform: translateX(5px);
}

Step 5

Let's handle the link's border.

.bg {
  position: absolute;
  bottom: 3px;
  left: -4px;
  border-radius: 10px;
  width: 25%;
  height: 25%;
  z-index: -1;
  background-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 74%);
  transition: all .5s;
}

We give our list a simple look: it has no bullets and we ensure that each list item is wrapped in a full block with margins and a background.
The z-index: 5 will allow us in the next step to overlay the small border on the left side relative to the text, without it covering the entire item on hover (it is actually a pseudo-element ::before).

Step 6

Let's enlarge the border on hover.

.container a:hover ~ .bg {
  width: 85%;
}

When the user's mouse hovers over our link, we will enlarge the border width to 85%. This effect combined with our icon moving to the right allows us to finish the button.