"Removing button animation" (#2784747) / ThemeNectar

Comments

LukeWilde42 started the conversation
May 24, 2021 at 10:08am
Hi guys, I'm trying to remove the button animation on a 'See Through Solid on Hover' button - I just want the usual smooth colour change but not the button moving on hover. Is there an easy setting to change to do this globally?
8,847
Tahir replied
May 24, 2021 at 10:11am
Hey LukeWilde42 ,
Please provide the page URL so I may write up the custom CSS for this request.
Thanks

ThemeNectar Support Team
LukeWilde42 replied privately
8,847
Tahir replied
May 24, 2021 at 11:35am
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):

body .nectar-button.see-through-2[data-hover-color-override="false"]:hover { -ms-transform: translateY(0px) !important; transform: translateY(0px) !important; -webkit-transform: translateY(0px) !important; }

Thanks
ThemeNectar Support Team

1,878

Judith replied

May 24, 2021 at 11:35am

Hi Luke,

Please try this css:

body[data-button-style*="slightly_rounded"] .nectar-cta:not([data-style="material"]) .link_wrap, body[data-button-style*="slightly_rounded"] .nectar-button.see-through, body[data-button-style*="slightly_rounded"] .nectar-button.see-through-2, body[data-button-style*="slightly_rounded"] .nectar-button.see-through-3, body[data-button-style*="slightly_rounded"] .portfolio-filters-inline .container ul li a, body[data-button-style*="slightly_rounded"] .slide-out-widget-area-toggle[data-custom-color="true"] a:before, body[data-button-style*="slightly_rounded"] #infscr-loading, body[data-button-style*="slightly_rounded"] .flex-direction-nav a, body[data-button-style*="slightly_rounded"] #pagination span, body[data-button-style*="slightly_rounded"] #pagination a, body[data-button-style*="slightly_rounded"] #pagination .next.inactive, body[data-button-style*="slightly_rounded"] #pagination .prev.inactive, body[data-button-style*="slightly_rounded"].woocommerce nav.woocommerce-pagination ul li a, body[data-button-style*="slightly_rounded"].woocommerce .container-wrap nav.woocommerce-pagination ul li span, body[data-button-style*="slightly_rounded"] .container-wrap nav.woocommerce-pagination ul li span, body[data-button-style*="slightly_rounded"].woocommerce-cart .wc-proceed-to-checkout a.checkout-button, body[data-button-style*="slightly_rounded"] input[type=submit], body[data-button-style*="slightly_rounded"] button[type=submit], body[data-button-style*="slightly_rounded"] input[type="button"], body[data-button-style*="slightly_rounded"] button, body[data-button-style*="slightly_rounded"] .nectar-button, body[data-button-style*="slightly_rounded"] .swiper-slide .button a, body[data-button-style*="slightly_rounded"] #top nav > ul > li[class*="button_solid_color"] > a:before, body[data-button-style*="slightly_rounded"] #top nav > ul > li[class*="button_bordered"] > a:before, body[data-button-style*="slightly_rounded"] #header-outer .widget_shopping_cart a.button, body[data-button-style*="slightly_rounded"] .comment-list .reply a, body[data-button-style*="slightly_rounded"].material #page-header-bg.fullscreen-header .inner-wrap >a, body[data-button-style*="slightly_rounded"] .sharing-default-minimal .nectar-social-inner >a, body[data-button-style*="slightly_rounded"] .sharing-default-minimal .nectar-love, body[data-button-style*="slightly_rounded"].single .heading-title[data-header-style="default_minimal"] .meta-category a, body[data-button-style*="slightly_rounded"] #page-header-bg[data-post-hs="default_minimal"] .inner-wrap > a, body[data-button-style*="slightly_rounded"] .masonry.classic_enhanced .posts-container article .meta-category a, body[data-button-style*="slightly_rounded"] .blog-recent[data-style*="classic_enhanced"] .meta-category a, body[data-button-style*="slightly_rounded"] .woocommerce-cart .wc-proceed-to-checkout a.checkout-button, .nectar-slide-in-cart.style_slide_in_click .widget_shopping_cart a.button {
    transition: none;
}

Thanks.

LukeWilde42 replied
June 1, 2021 at 8:58am
Hi Tahir, this worked, thatnk you. I would alos like to remove the drop shadow on hover to these buttons but I can't seem to be able to remove that by adding any of the box shadow CSS. I can't seem to find the bit of CSS to change this - could you point me in th eright direction please?
Also, in another section I have a button which I've had to override to be white as it's sitting over a coloured background row. How can I easily apply the same CSS changes (no movement or drop shadow) to this too?

8,847

Tahir replied

June 1, 2021 at 11:53am

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):

body .nectar-button.small.see-through-2:hover {
    -ms-transform: translateY(0px) !important;
    transform: translateY(0px) !important;
    -webkit-transform: translateY(0px) !important;
    box-shadow: none !important;
}
body .nectar-button.see-through-2[data-hover-color-override="false"]:hover {
    -ms-transform: translateY(0px) !important;
    transform: translateY(0px) !important;
    -webkit-transform: translateY(0px) !important;
    box-shadow: none !important;
}

Thanks

ThemeNectar Support Team

1 Like