How to Create an Animated Gradient Button

How to Create an Animated Gradient Button for your website. I got this idea from Oxy Ninja. I saw the website using the cool animation button. Here's how the button looks on Oxy Ninja website.

here's the button that we want to implement:

button

Basically, the logic similar to Pure CSS Gradient Background Animation by Manuel Pinto I found this on Codepen.

See the Pen Pure CSS Gradient Background Animation by Manuel Pinto (@P1N2O) on CodePen.

How to Create an Animated Gradient Button

This trick doesn't need any JavaScript. It's Pure CSS using CSS animation @keyframes. It works in WordPress Pagebuilder like Oxygen Builder. I'm going to separate two tutorials on how to Implement it on Oxygen Builder.

Implement an Animated Gradient Button in Oxygen Builder

First, all you need to do is add Text Link Element. then put class on it: in example .button-gradient. And insert your preferable padding, font-size, and border-radius.

How to Create an Animated Gradient Button

add Gradient Background in Text Link element. Click Text Link Element>Advanced>Gradient. I use three colors you can use 2 colors or more.

How to Create an Animated Gradient Button

add this CSS, you can use Code Block Element to show on a specific page. Or you can put this CSS Code on Oxygen Stylesheet. If you want to change the animation duration, you can change the 3s into your preferable duration like 2s or more.

.button-gradient{
-webkit-animation: Gradient 3s infinite cubic-bezier(.62, .28, .23, .99) both;
-moz-animation: Gradient 3s infinite cubic-bezier(.62, .28, .23, .99) both;
animation: Gradient 3s infinite cubic-bezier(.62, .28, .23, .99) both;
background-size: 800% 400%;
}

then add @keyframes css in Code Block Element or Oxygen Stylesheet

@keyframes Gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

then click save and here's how it looks.

button

Don't Miss

OUR STORIES

Like what you see? Keep in touch and we'll send more your way.
 

Share This Article

You Might Want To Read

Leave a Reply

Your email address will not be published. Required fields are marked *

arrow-right