DEV Community

Cover image for Pure CSS animated gradient colour button is easier than you think!
Albert Walicki
Albert Walicki

Posted on • Originally published at albertwalicki.com

5 2

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (1)

Collapse
 
hellodonovan profile image
Donovan

This is perfect. I was looking for something like this after taking inspiration from the "start coding" button on Codepen.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more