HTML CSS Button Animation | Hover Effect

Here’s a simple HTML CSS button design with an animation(more of a hover effect).

Final Output:

1. Add your HTML button.

<button>Subscribe</button>

Output:

2. Add colors and borders to the button.

button {
  background-color: #fff;
  color: #ff0000;
  border: 1px solid #ff0000;
  border-left-width: 5px;
}

Output:

3. Add some padding and letter spacing. And increase the button’s font size as well.

button {
  padding: 0.5em 1em;
  font-size: 1.5em;
  letter-spacing: 0.1em;
}

Output:

4. We’ll use a linear gradient to have two background colors: white and red.

button {
  background-image: linear-gradient(to left, #fff 50%, #ff0000 50%);
}

Output:

5. Now, to have only one color displayed at a time, set the background size for the button to 200%. So we have both colors, but only one is displayed for the 100% portion of the button. The rest half can be used on hover.

button {
  background-size: 200%;
}

This will display the red color. To have the other half, i.e., the white color, set the background position to right.

button {
  background-position: right;
}

Output:

6. For the button hover effect, let’s display the red background by changing the background position to left. And set the font color to white on hover.

button:hover {
  background-position: left;
  color: #fff;
}

Get a smooth animation by adding a transition to the button.

button {
  transition: all 0.5s;
}

Output:

Final Output Code for HTML CSS button animation:

HTML:

<button>Subscribe</button>

CSS:

button {
  background-color: #fff;
  color: #ff0000;
  padding: 0.5em 1em;
  font-size: 1.5em;
  border: 1px solid #ff0000;
  border-left-width: 5px;
  letter-spacing: 0.1em;
  background-image: linear-gradient(to left, #fff 50%, #ff0000 50%);
  background-size: 200%;
  background-position: right;
  transition: all 0.5s;
}
button:hover {
  background-position: left;
  color: #fff;
}