TheLazy.Dev
Portfolio GitHub

Blog

css |gradient |button |beginners

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

albertwalicki

Albert Walicki

Posted on December 8, 2020

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

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

Outline Button - Easy, Straight, and Boring

Let's start with a basic outline button with hover. It can be created like this:

HTML:

<a href="/" title="Hello button" class="btn">Hello</a>
Enter fullscreen mode Exit fullscreen mode

CSS:

.btn {
  border: 2px solid #4CAF50;
  background-color: transparent;
  color: #4CAF50;
  padding: 10px 28px;
  font-size: 16px;
  cursor: pointer;
  transition: 256ms all;
  border-radius: 20px;
}

.btn:hover {
  background-color: #4CAF50;
  color: #fff;
}
Enter fullscreen mode Exit fullscreen mode

Basic hover effect

Gradient Button and Text

Going one step further, let's add 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:

<a href="/" title="Hello button" class="btn">Hello</a>
Enter fullscreen mode Exit fullscreen mode

CSS:

.btn {
  display: block;
  width: 150px;
  background: linear-gradient(90deg, #FFFF00 6%, #FFA500 25%, #F14444 45%, #D53567 55%, #9A109A 94%);
  text-align: center;
  padding: 13px 20px;
  color: #fff;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255,255,255,0.001);
  transition: 256ms all;
  position: relative;
  cursor: pointer;
}

.btn:before {
  background: rgb(24,24,24);
  content: '';
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: -1;
}

.btn:after {
  content: '';
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  right: -1px;
  background: linear-gradient(90deg, #FFFF00 6%, #FFA500 25%, #F14444 45%, #D53567 55%, #9A109A 94%);
  transition: 256ms all;
  z-index: -1;
}
Enter fullscreen mode Exit fullscreen mode

Static gradient border

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);
}
Enter fullscreen mode Exit fullscreen mode

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:

<a href="/" title="Hello button" class="btn">Hello</a>
Enter fullscreen mode Exit fullscreen mode

CSS:

.btn {
  display: block;
  width: 150px;
  background: linear-gradient(90deg,#ffffff 3%,#ffffff 47%,#FFFF00 53%,#FFA500 72%,#F14444 77%,#D53567 88%,#9A109A 97%);
  background-size: 200% 100%;
  background-position: left center;
  text-align: center;
  padding: 13px 20px;
  color: #fff;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255,255,255,0.001);
  transition: 256ms all;
  position: relative;
  cursor: pointer;
}

.btn:before {
  content: '';
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  right: -1px;
  background: linear-gradient(90deg,#ffffff 3%,#ffffff 47%,#FFFF00 53%,#FFA500 72%,#F14444 77%,#D53567 88%,#9A109A 97%);
  transition: 256ms all;
  z-index: -1;
  background-size: 200% 100%;
  background-position: left center;
}

.btn:after {
  background: rgb(24,24,24);
  content: '';
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: -1;
}

.btn,
.btn:before {
  background-position: right center;
}
Enter fullscreen mode Exit fullscreen mode

Animated border and text - gradient button

And that's it!
You can play with the final button on CodePen.

You can follow me on social media or sign up for my newsletter!
🐦 Twitter
👨🏻‍💻 Blog
📰 Medium
💌 Newsletter
🦄 Frontend Unicorn book

💖 💪 🙅 🚩
albertwalicki
Albert Walicki

Posted on December 8, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

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

December 8, 2020