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:
Gradient button and text
One step further - adding gradient borders and text. To achieve that, we need to do a few things:
- Wrap our button with div and set the background as our body colour
- Add pseudoelements to create borders
- Lastly, we need to add three CSS properties:
- background-clip: text;-webkit-background-clip: text;
- -webkit-text-fill-color: rgba(255,255,255,0.001);
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.
And that's it!
You can play with the final button here.