The Salient Theme example for a "resort" (it has a hero video with "Your Paradise" at the top) has a CTA button on the top right that has an animated gradient. We cannot find a way to do this, is this a plug in? code? if it's code, what is the code for it? Are there instructions somewhere on how to do this?
Is there a way to use the animated gradient button outside of the header? As in, a Call To Action button or a regular button style? This element is such a great look, it would awesome to use it elsewhere on a website beside just the header.
Thanks for the reply! I meant the animated gradient, not the static gradient. Would be awesome to have the animated gradient for a Call To Action or to style a regular button.
The "Shop Now" CTA are the buttons I wanted to assign the animated gradient to. I do see the meta field in the Call To Action setting for extra class name. Assuming you would supply the class code, I would have to add that to the general settings, css/script related section and then apply that class in the extra class name field?
If you need back-end access to the site, just let me know.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
Thanks for the follow up! I added the custom CSS to the theme options panel. I just changed one the gradient colors you had in the snippet. It's definitely a gradient but it's not animating like the menu button does. That is what I am trying to achieve. To be able to style a button (or CTA) on the site with an animated gradient the same way the button in the menu animates. I do see some code when inspecting the element of the menu button animation but not sure if that is it or how I would add that to the snippet you gave me.
I apologize for confusing you by citing code in my previous reply. I do NOT want text animation. I do want the animated gradient background that is in the menu button. Please see the attached screen grab.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
Thank you for that code. It seems like we are getting closer to what I was looking for. I added the code in the theme options panel. When you look at the page https://hydrovi.com/andrew/ the background animated gradient in the menu button seems to fade thru the gradient almost like a pulsating effect. If you look at the Shop Now CTA button the animation occurs then there is a solid color slide over.
Is it possible to have the same animation sequence as the background that is on the menu button?
The Salient Theme example for a "resort" (it has a hero video with "Your Paradise" at the top) has a CTA button on the top right that has an animated gradient. We cannot find a way to do this, is this a plug in? code? if it's code, what is the code for it? Are there instructions somewhere on how to do this?
Hi there,
This is achieved using CSS. The selector is:
#header-outer .menu-item-56 > a:before { background-size: 1300%; animation: nectarBtnGradientScroll 40s linear infinite; background: linear-gradient(90deg,#98c8e8,#ffac66,#98c8e8); }Thanks.
Hi Andrew,
Is there a way to use the animated gradient button outside of the header? As in, a Call To Action button or a regular button style? This element is such a great look, it would awesome to use it elsewhere on a website beside just the header.
Thanks!
Mike
Hello again,
You can set the color scheme to a button in the button settings to gradient
You can also give your buttons a custom class and use a custom CSS to change them.
Thanks,
Hi Andrew,
Thanks for the reply! I meant the animated gradient, not the static gradient. Would be awesome to have the animated gradient for a Call To Action or to style a regular button.
Hello again,
You will need custom CSS to achieve this. Kindly allocate your buttons custom classes or IDs and share a link so that we can assist with your request.
Thanks,
Hi Andrew.
Thanks so much for helping out on this request! I created a sample page:
https://hydrovi.com/andrew/
The "Shop Now" CTA are the buttons I wanted to assign the animated gradient to. I do see the meta field in the Call To Action setting for extra class name. Assuming you would supply the class code, I would have to add that to the general settings, css/script related section and then apply that class in the extra class name field?
If you need back-end access to the site, just let me know.
Thanks again!
Mike
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
.nectar-cta[data-color="extra-color-gradient-1"]:not([data-style="material"]) .link_wrap { background: linear-gradient(to bottom right,#ed8670,#e73030); }Thanks
ThemeNectar Support Team
Hi Tahir,
Thanks for the follow up! I added the custom CSS to the theme options panel. I just changed one the gradient colors you had in the snippet. It's definitely a gradient but it's not animating like the menu button does. That is what I am trying to achieve. To be able to style a button (or CTA) on the site with an animated gradient the same way the button in the menu animates. I do see some code when inspecting the element of the menu button animation but not sure if that is it or how I would add that to the snippet you gave me.
https://hydrovi.com/andrew/
I am afraid that text animation is not available in other buttons as it is not SEO friendly.
Thanks
ThemeNectar Support Team
Hi Tahir,
I apologize for confusing you by citing code in my previous reply. I do NOT want text animation. I do want the animated gradient background that is in the menu button. Please see the attached screen grab.
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
.nectar-cta[data-color="extra-color-gradient-1"]:not([data-style="material"]) .link_wrap { background: linear-gradient(to bottom right,#ed8670,#76b8e8); background-size: 1300% !important; animation: nectarBtnGradientScroll 40s linear infinite !important; transform-origin: top; }Thanks
ThemeNectar Support Team
Hi again Tahir,
Thank you for that code. It seems like we are getting closer to what I was looking for. I added the code in the theme options panel. When you look at the page https://hydrovi.com/andrew/ the background animated gradient in the menu button seems to fade thru the gradient almost like a pulsating effect. If you look at the Shop Now CTA button the animation occurs then there is a solid color slide over.
Is it possible to have the same animation sequence as the background that is on the menu button?
Thanks again!
Mike
Hey Again,
Use this revised css below.
.nectar-cta[data-color="extra-color-gradient-1"]:not([data-style="material"]) .link_wrap { background-size: 1300% !important; animation: nectarBtnGradientScroll 40s linear infinite !important; transform-origin: top; background: linear-gradient(90deg,#76b8e8,#ed8670,#76b8e8); }Thanks
ThemeNectar Support Team
Hi Tahir,
The revised CSS is PERFECT! Thank you so much for working thru this with me! I really appreciate you!
Thanks,
Mike