Gradients (buttons and text)

Hi,
Glad to help, as for copying other styles and using them, I wouldn’t say that you can copy css you find and add it to your elements very easily, you would need a little knowledge of css. I would say that if you see this done a few times you will get a sense of how to do it. If you find something else you want to do please let us know and we will assist again.

Best regards,
Mike

Hi,

@AwiIlanKali thank you for the link, I took a look at your buttons and adjusted the css for your buttons that were using some different classes and it seems to work now. Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

#top .main_color .btn a.avia-button.avia-color-custom {
     color: rgba(255,255,255,0.9) !important; 
     border-radius: 50px !important; 
     background: linear-gradient(-45deg, #FFA63D, #FF3D77, #338AFF, #3CF0C5) !important;
     border-color: transparent !important; 
     background-size: 600% !important; 
     animation: anime 16s linear infinite; 
}

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

Here is the result:
via GIPHY

Best regards,
Mike

Hi,
Glad to hear, I’m on a PC and it works with Chrome & Edge, for Firefox please try using this css instead:

#top .main_color .btn a.avia-button.avia-color-custom {
     color: rgba(255,255,255,0.9) !important; 
     border-radius: 50px !important; 
     background: linear-gradient(-45deg, #FFA63D, #FF3D77, #338AFF, #3CF0C5) !important;
     border-color: transparent !important; 
     background-size: 600% !important; 
     animation: anime 16s linear infinite; 
     -moz-animation: anime 16s linear infinite;
}

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

Best regards,
Mike

Hi,
Sorry for the late reply, I did not figure out why this is not working, I’m sure the css is correct with the proper “-moz-” prefixes, so I tried changing it to jQuery and now it works in Chrome and Firefox.
To test this, please add a code block element to your page and place this code inside:

<script>
(function($){
$(document).ready(function () {
    $('.btn2 a.avia-button').css({
     'color': 'rgba(255,255,255,0.9)', 
     'border-radius': '50px', 
     'background': 'linear-gradient(-45deg, #FFA63D, #FF3D77, #338AFF, #3CF0C5)',
     'border-color': 'transparent', 
     'background-size': '600%', 
     'animation': 'anime 16s linear infinite' 
})

});
})(jQuery);
</script>
<style>
 @keyframes anime {
   0% {
     background-position: 0% 50%;}
   50% {
     background-position: 100% 50%;}
   100% {
     background-position: 0% 50%;}
}
</style>

We could make this code global, but first, test it on one page to see if it’s also working for you.

If you would like to test this on a new page, please Enable Avia Layout Builder Debugger which will add a new text field below the Advanced Layout Builder, and then add the page shortcode in the link below, then save the page.
https://www.dropbox.com/s/641pwwo7eukd5ts/gradient_button_shortcode.txt?dl=0

Best regards,
Mike

Hi,
The jQuery code I posted last will not work in the Quick CSS field, that area is only for css.
If you include an admin login I can demonstrate on a test page, or even on the one page you are working on.
Or you can download the test page shortcode that I wrote about.
But if you are fine with it as it is that ok too :)

Best regards,
Mike

Hi,
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

h2.kop-gradient {
	display: table !important; 
}

Best regards,
Mike