Logo of the blog

Pure CSS animated gradient colour button is easier than you think!

A quick guide on how to add some life to your website

Most buttons are boring. Solid, standard borders, most of them are not aligned correctly. In this case, let's learn how to create a gradient colour button with animated borders and text! One single CSS property will handle all animations.

Outline button - Easy, straight and boring

In the first place, let's start with a basic outline button with hover can be created like this:

HTML
CSS
PREVIEW
Hello

Gradient button and text

One step further - adding gradient borders and text. To achieve that, we need to do a few things:

HTML
CSS
PREVIEW
Hello

Awesome! You have created a gradient border button with gradient text! Now we will bring it to life with extra CSS.

Final boss - animated gradient button

In CSS we can't transition gradients. It would be awesome to see smooth animation with CSS like this:

.gradient {
  background-image: linear-gradient(red, blue);
  transition: background-image 0.5s linear;
}

.gradient:hover {
  background-image: linear-gradient(green, orange);
}

But it won't work. It immediately changes to the other one without transition. There are a few hacks to do it, but my favourite is to animate background-position.

Firstly, we need to add two properties to our button:

  • background-size: 200% auto;
  • background-position: left center;

Then on hover:

  • background-position: right center;

In this case, I added a gradient starting with white colour. It enhances the impression of an animated border.

HTML
CSS
PREVIEW
Hello

And that's it!

You can play with the final button here.

Join my newsletter for regular updates every two weeks

© Albert Walicki 2021