Remove hover effect on "Add to cart" "Check out" and Empty Cart "Continue shopping" buttons

[rencafenyc]

Hi, how can I remove the slight border highlight / hover effect on "Add to cart" "Check out" and Empty Cart "Continue shopping" buttons when the cursor is hovered over them?

For buttons on rich text blocks, I was able to disable it by adding this code at the end of the base.css file:

.button:not([disabled]):hover:after, .shopify-challenge__button:hover:after, .customer button:hover:after, .shopify-payment-button__button--unbranded:hover:after { --border-offset: unset !important; }

Now, rich text block buttons do not have the hover effect:

However, I'd like the same to be applied to the "Add to cart" "Check out" and Empty Cart "Continue shopping" buttons. Thank you for your help!

URL: https://rencafenyc.com/

[rajweb]

Hey @rencafenyc ,

To remove the hover effect on the "Add to cart", "Check out", and "Continue shopping" buttons on your Shopify store, you can apply the same approach you used for the rich text buttons. Here's how you can do it:

1. Locate the Buttons in the Code

- The hover effect on these buttons is likely controlled by CSS selectors in your theme's base.css or similar CSS/SCSS files.

2. Add Custom CSS to Remove Hover Effects

- Add the following CSS to the end of your base.css or wherever your custom CSS resides: 

/* Remove hover effect for Add to Cart, Check Out, and Continue Shopping buttons */
.product-form__submit:hover:after, 
.cart__submit-controls button:hover:after, 
.cart__continue-button:hover:after, 
.shopify-challenge__button:hover:after, 
.customer button:hover:after, 
.shopify-payment-button__button--unbranded:hover:after {
    --border-offset: unset !important;
}

/* Optional: Make hover effect consistent with non-hover state */
.product-form__submit:hover, 
.cart__submit-controls button:hover, 
.cart__continue-button:hover {
    background-color: transparent !important;
    border: .1px solid #354b2a !important;
    color: #354b2a !important;
}

Let me know if you need further assistance!

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat

[rencafenyc]

Hi, I added the code you provided into the end of the base.css file, saved the edit, and refreshed the page – but the hover effect is still there and nothing has changed:

Would you mind taking another look please?