# Overview
We must follow the three steps below to create an animated button:

## Step 1: Add HTML

First of all, we have to write the HTML for creating the button.



<html>
<body>

  <h2>Animation occurs when you press the button</h2>

  <button class="button">Click</button>

</body>
</html>

codemirror

### Explanation

- Line 4: We write a message to be displayed before the `button.`

- Line 6: We create a `button` and call the styling class of the `button.`

## Step 2: Add CSS



.button 
{
  padding: 20px 30px;
  font-size: 28px;
  text-align: center;
  cursor: pointer;
  color: #fff;
  background-color: #0ca5bc;
  border-radius: 20px;
  box-shadow: 0 10px #999;
}

.button:hover {background-color: #007095}

.button:active {
  background-color: #007095;
  box-shadow: 0 5px rgb(25, 25, 25);
  transform: translateY(5px);
}

### Explanation

- Lines 1–11: We create the styling for the `button` when no action is performed, like the `font size,` `border-radius,` `background color,` etc.

- Line 13: We create the styling for the `button,` which occurs if someone places the cursor on the button.

- Line 15–19: We create the styling for the `button,` which occurs when the button is pressed. 

## Step 3: Combine HTML and CSS
To create the `button` and set the styling for the `button,` we have to combine the HTML and CSS files.





How to create an animated button using HTML and CSS

Overview

Step 1: Add HTML

Explanation

Step 2: Add CSS

Explanation

Step 3: Combine HTML and CSS