Logo - Albert Walicki

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

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

Published:

css
CSS button with gradient border

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
<a href="/" title="Hello button" class="btn">Hello</a>
Preview
Hello

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);
HTML
CSS
<a class="btn" href="/" title="Hello">Hello</a>
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
<a class="btn" href="/" title="Hello">Hello</a>
Preview
Hello

And that’s it!

You can play with the final button Here.

Read more

css
Aurora UI example of usage

Aurora UI - how to create with CSS

A new trend in UI design by developer point of view

Read more
Logo - Albert Walicki

Hello, i’m Albert Walicki. i’m a frontend developer and cofounder of development & design agency Hype4 and education platform Hype4 Academy. I wrote a book for Junior Frontend developers called Frontend Unicorn.

BlogGlassmorphismAurora UIShapes in CSSUnique css illustrations

Get in touch!

Have a question or need a project? Contact me!

© 2020-present Albert Walicki. All Rights Reserved