Animated gradient button

You can easily create animated gradient buttons in Kickpages with some extra CSS:

The best way to create it is to use a custom code block and add a link element (or any element you would like to have an animated gradient border):

The code to add in my example is:

<a href="#" class="animated-gradient-button">
    My super awesome button
</a>

After that we need to add the CSS for the button and animation.To generate the gradient animation, we can use a website https://www.gradient-animator.com/

You can add any number of colors (minimum of two) and set the speed of the animation. The example  use is set to 3 seconds which looks good, but it is up to you. You can set the degree of the gradient (60% in my example) and click on Preview. You will see your animated gradient as the background of the page.Copy the generated CSS:

Paste the generated CSS into your custom code block inside <style></style> tags:and rewrite the class to the one you used in your button. In my case it is "animated-gradient-button" but it can be anything as long as the two classes are the same:

You can see that I have added an extra padding line on the end of the screenshot above, and you should use additional custom CSS to style your button's look, text size, color, padding, margins etc as you would like.

The full code I used that includes everything is:

<a href="#" class="animated-gradient-button">
    My super awesome button
</a>

<style>
.animated-gradient-button{
    background: linear-gradient(60deg,#F79533 ,#F37055 ,#EF4E7B ,#A166AB ,#5073B8 ,#1098AD ,#07B39B ,#6FBA82);
    background-size: 400% 400%;
    -webkit-animation: animated_button 3s ease infinite alternate;
    -moz-animation: animated_button 3s ease infinite alternate;
    animation: animated_button 3s ease infinite;
    color: #ffffff !important;
    padding: 15px 30px;
    line-height: 50px !important;
    font-weight: bold;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

@-webkit-keyframes animated_button {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes animated_button {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes animated_button {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
</style>

The final result is:

Since it is pure CSS, feel free to change any aspect of your button and add additional styling to it if required.