Introduction

Modern CSS is powerful and versatile. It can be used to create different animations without using any JavaScript. Let's leverage the power of CSS to create a cool hover animation using the transform property, pseudo-elements, pseudo-classes, and the transition property.

Here’s a preview of the effect we want to create.

The HTML markup

The HTML structure is simple. Just a div containing an anchor element with the class btn, which we’ll style as a button.

<div>
  <a href="#" class="btn">i am a cool button</a>
 </div>

Styling the button

Let’s add some basic styles to the button.

.btn:link{
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  padding: 15px 40px;
  background-color: #fff;
  color: #777;
  border-radius: 100px;
  transition: all 0.5s;
}

Notice that I specified the transition property. This is what will give us a smooth animation. The transition property should always be added to the element you want to animate.

Pseudo-classes

Let’s take a minute to understand what pseudo-classes are. Pseudo-classes are used to add styles to elements under a certain condition or state. As we all know, anchor elements have four states:

• The link state: this is the default state of a link before it is clicked.
• The active state: this is the state of a link the moment it is clicked.
• The visited state: this is when the link has already been clicked by the user.
• The hover state: this is the state of a link when a mouse cursor goes over it.

Each link state has its pseudo-class that can be used to style the link in that particular state. The pseudo-classes include :link, :active, :visited, and :hover. For this button, we’ll apply the animation in the active and hover states.

If you look at the demo above, you’ll notice that this button animation has three parts.

• First, when you hover over the button, it moves up revealing a large shadow beneath it. This large shadow makes it look like it’s moving closer to the screen.
• There’s also a pseudo-element behind the button. This pseudo-element scales up and fades out when you hover over the button.
• When you click the button, it goes down a little bit. The shadow becomes smaller making the button look further away from the screen.

Let’s start by animating the hover and active states. We’ll create the pseudo-element later.

Animating the hover state

The first thing we want on hover is for the button to move up and reveal a big shadow under it. To achieve this, we’ll use translateY with a negative value and then add a shadow to the button.

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

Animating the active state

When the button is clicked, we want it to move slightly downward and display a smaller shadow, making it look like the button is further from the screen. So we'll apply a smaller shadow here.

.btn:active {
  transform: translateY(-1px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

The button will only move 1px up when we click it. This 1px is in relation to the link state (original state), not the hover state.

Now when you hover over the button, it will go up with a large shadow beneath. When you click, it will go down to 1px with a smaller shadow.

Creating the pseudo-element.

The ::after pseudo-element is used to insert content before an element. We’ll use the ::after pseudo-element to create a virtual element right after our button. The trick here is to create a pseudo-element that looks exactly like the button and place it behind the button. When you hover over the original button, this pseudo-element will scale up and fade out creating the effect we want.

In order for an ::after pseudo-element to appear on the page, we need to specify its content property. We’ll style the pseudo-element exactly like the original button. Don’t forget to specify the transition property on the new pseudo-element.

.btn::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 100px;
  background-color: #fff;
  transition: all 0.4s ease-out;
}

This pseudo-element will be treated as a child of the button. The height and width of 100% means that the new button will have exactly the same height and width as the original button.

The new button will now appear as a part of the original button, making it look bigger. We want this new button to be behind the actual button. How do we do that? We’ll use absolute position and z-index to achieve this.

.btn::after {
  position: absolute;
  top: 0;
  left: 0;
}
.btn:link {
  Position: relative;
}

We have positioned the new button absolute and positioned the original button relative so it will serve as a reference for the absolute position. This will place the new button on top of the original button. To put the new button behind, we’ll use z-index. This z-index defines the position of elements when they are on top of one another. A negative z-index will move the new button behind the original button.

.btn::after {
  z-index: -1;
}

The button is now hidden behind as if it doesn’t exist. We want this hidden button to appear when we hover over the visible button. For this, we’ll use the scale property.

.btn:hover::after {
  transform: scaleX(1.4) scaleY(1.6);
  opacity: 0;
}

This means that when we hover over the original button (.btn ), scale the the pseudo-element. The opacity was added because we want the button to scale up and fade out at the same time. scaleX will scale the button on the x-axis and the scaleY will scale it on the y-axis.

Conclusion

Buttons are an important part of any webpage. Having buttons that stand out on your webpage greatly enhances user experience. Now that you’ve learned how to make this cool button animation, ensure you don’t use boring buttons on your webpage again😉