# 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

Create an animated button by writing HTML for the button and styling with CSS for different states.