Simple animated button with CSS
Tags: webdev, beginners, tutorial, css
Published: 2024-05-29 19:44:01



## 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.

![Animated button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3gyqfekz6h1jndoy3y30.gif)

## 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/08auo853i11xxtldtvk5.png)

## 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 we click the button, we want it to go down a bit and reveal a smaller shadow. This will give the impression that the button is further away from the screen. So we’ll use 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. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w2o1wglpht876u8ld9lw.gif)

## 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 to see this hidden button 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😉