Animating linear-gradient for button links

Animate linear-gradient. How to animate linear-gradient using CSS. Sort of.

Animating linear-gradient in CSS? You can’t do it. You’re right, it can’t be done. However, there is a way to sort of animate that linear-gradient.

The particular scenario I’m referencing here is having slightly more interesting button hover effects. Buttons, or links styled as a button, is one of things we learn early on. They’re pretty ubiquitous on the web today. You hover your mouse over the button (or link that’s styled to look like a button) and it changes colour with a transition of a few tenths of a second.

Why am I writing about animating linear-gradient?

Why am I writing this? I was looking at a website the other day. It’s not important which one. They had a linear-gradient as the background for their links styled as buttons.

When hovering over, the linear-gradient moved along. As I do with a lot of websites, I used the dev tools to inspect how they accomplished it. It was a hard problem; I’m just interested to see how people do things on the web.

For the background of this button link, they were loading in a PNG file which was itself a gradient. Just an image file. When building sites, I like to limit the number of requests if possible. Personally, I’d rather do something in CSS than load an extra resource.

On hover, the background-position was changing. That moved the image along. Interestingly, in CSS, linear-gradient is part of background-image. Background-image can’t be animated. Animating the background-position IS possible though.

Rather than using an image file, this can be done with a straight forward linear-gradient while still animating the background-position.

You can’t animate the linear-gradient itself (or any gradient) but you CAN animate the background-position

As I mentioned above, it’s possible to animate the background-position in css. (When I say animating here, I mean with a transition applied to a class for a hover effect).

How to animate linear-gradient:

Start by setting up a linear-gradient on your button link.

The exact gradient is up to you. In the example I’ll post in below I’ve used some hard stops in the gradient to create a particular effect.

The key here is setting background-size too. Background-size can accept a few values, but in my example I’m making use of setting the X and Y values (in that order). background-size: 250% 100%. That tells the background to be 2.5 times wider than the button element.

Using percentages here is important. No matter how wide your button link is (you might have set a large X axis padding), the gradient background will always be 2.5 wider.

Next, set the background-position. Your exact values will depend on what effect you’d like achieve, but I set mine at 100% 50% (x and y axis respectively). This means the background gradient will start with it’s far right side on the right side of the button link element.

Now set up your hover/focus for the button link (remembering to add a transition to both the original class and the hover/focus. You now want to set background-position (on the hover/focus in your css) to 0% 50% (x and y axis respectively).

This means when you hover or focus the element, it’ll transition the gradient background from one side to the other. Perfect.

Here’s my CodePen of it. Simple, but it does the job.

See the Pen Button link using linear gradient and hard stops by Scott Cole (@scottcole_webdesign) on CodePen.0

Conclusion

While you can’t animate the gradient itself with this method, for simple effects like this it’s ideal.

Linear and radial gradients are pretty powerful too. You can do lots with them. Using background positioning etc. you can shift them around and make some pretty cool things.

No extra resource requests needed. Just CSS.

Here're some posts similar to what you've just read

Animating linear-gradient for button links

Animating linear-gradient in CSS? You can’t do it. You’re right, it can’t be done. However, there is a way to […]

Design | Development

Should you let your web developer register your domain name?

You’re starting a business, or you’re starting a personal website, and you need a website. You’re hiring someone to help […]

Development | For the Clients | Wordpress

Should your web developer host your website? I say no… Here’s why

I’ve read a few social media posts recently, and I’ve spoken to a few potential clients, about web developers (or […]

Development | For the Clients | Wordpress

Leave a Reply

Your e-mail address will not be published. Required fields are marked *