Okay
  Public Ticket #3053738
Remove shadow and transition of buttons
Closed

Comments

  •  8
    Erik started the conversation
    May 29, 2022 at 9:17pm

    How do I remove the shadow and the upward movement transition when I hover these nector buttons?

  •  1,877
    Judith replied
    May 30, 2022 at 5:11am

    Hello Erik,

    Please try this css:

    body[data-button-style="slightly_rounded_shadow"] .wp-block-button > .wp-block-button__link:hover, body[data-button-style="slightly_rounded_shadow"] .nectar-button:hover, body[data-button-style="slightly_rounded_shadow"] .nectar-button:focus, body[data-button-style="slightly_rounded_shadow"].ascend .nectar-button.see-through:hover, body[data-button-style="slightly_rounded_shadow"] input[type="submit"]:hover, body[data-button-style="slightly_rounded_shadow"] input[type="submit"]:focus, body[data-button-style*="slightly_rounded"].single .heading-title[data-header-style="default_minimal"] .meta-category a:hover, body[data-button-style*="slightly_rounded"] #page-header-bg[data-post-hs="default_minimal"] .inner-wrap > a:hover, body[data-button-style="slightly_rounded_shadow"].woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover, body[data-button-style="slightly_rounded_shadow"] .swiper-slide .button a:hover, body[data-button-style="slightly_rounded_shadow"].ascend .nectar-button.see-through-2:hover, body[data-button-style="slightly_rounded_shadow"].ascend .nectar-button:hover, body[data-button-style="slightly_rounded_shadow"].woocommerce-page .woocommerce p.return-to-shop a.wc-backward:hover, body[data-button-style="slightly_rounded_shadow"] .sharing-default-minimal .nectar-love:hover, body[data-button-style="slightly_rounded_shadow"] .sharing-default-minimal .nectar-social-inner > a:hover, body[data-button-style="slightly_rounded_shadow"] .woocommerce.add_to_cart_inline a.button.add_to_cart_button:hover, body[data-button-style="slightly_rounded_shadow"] .container-wrap input[type="submit"]:hover, body[data-button-style="slightly_rounded_shadow"] .container-wrap button[type="submit"]:hover, body[data-button-style="slightly_rounded_shadow"] .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
        box-shadow: none !important;
    }

    Thanks.

  •  1
    Erik replied
    May 30, 2022 at 5:15am

    Shadow removed.  Thank you. I still have that upward movement transition hover.  How do i remove the transition?

  •  1,877
    Judith replied
    May 30, 2022 at 5:21am

    Hello Erik,

    Please try this css:

    body[data-button-style="slightly_rounded_shadow"] .wp-block-button > .wp-block-button__link:hover, body[data-button-style="slightly_rounded_shadow"] .nectar-button:hover, body[data-button-style="slightly_rounded_shadow"] .nectar-button:focus, body[data-button-style="slightly_rounded_shadow"].ascend .nectar-button.see-through:hover, body[data-button-style="slightly_rounded_shadow"] input[type="submit"]:hover, body[data-button-style="slightly_rounded_shadow"] input[type="submit"]:focus, body[data-button-style*="slightly_rounded"].single .heading-title[data-header-style="default_minimal"] .meta-category a:hover, body[data-button-style*="slightly_rounded"] #page-header-bg[data-post-hs="default_minimal"] .inner-wrap > a:hover, body[data-button-style="slightly_rounded_shadow"].woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover, body[data-button-style="slightly_rounded_shadow"] .swiper-slide .button a:hover, body[data-button-style="slightly_rounded_shadow"].ascend .nectar-button.see-through-2:hover, body[data-button-style="slightly_rounded_shadow"].ascend .nectar-button:hover, body[data-button-style="slightly_rounded_shadow"].woocommerce-page .woocommerce p.return-to-shop a.wc-backward:hover, body[data-button-style="slightly_rounded_shadow"] .sharing-default-minimal .nectar-love:hover, body[data-button-style="slightly_rounded_shadow"] .sharing-default-minimal .nectar-social-inner > a:hover, body[data-button-style="slightly_rounded_shadow"] .woocommerce.add_to_cart_inline a.button.add_to_cart_button:hover, body[data-button-style="slightly_rounded_shadow"] .container-wrap input[type="submit"]:hover, body[data-button-style="slightly_rounded_shadow"] .container-wrap button[type="submit"]:hover, body[data-button-style="slightly_rounded_shadow"] .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
        -webkit-transform: translateY(0px);
    }

    Thanks

  •  1
    Erik replied
    May 30, 2022 at 5:24am

    That worked.  I've been using this theme for over 10 years. I'm always surprised by the the fast response.  Well done !!

  •  1,877
    Judith replied
    May 30, 2022 at 5:39am

    Hi Erik,

    Thanks for your kind words.

    Have a great one !