I want to make changes in Add to Cart button hover

Store Design
, , , , , , , ,

Topic summary

A Shopify store owner is experiencing an unwanted hover effect on their Add to Cart button.

Current Problem:

  • When hovering, an additional border appears around the button
  • The original border disappears
  • The button increases slightly in size

Desired Outcome:

  • Maintain consistent button size during hover
  • Change the existing border color from #8e8e8e (gray) to #0C2753 (blue) on hover
  • Prevent the appearance of a secondary border

Context:

  • The user provided screenshots showing the before/after hover states
  • Referenced their website (www.swayur.com) for additional context
  • Seeking CSS customization help for this third-party Shopify theme

The issue remains unresolved and awaits community input on the proper CSS solution.

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

I want to make changes in Add to Cart button hover. Below is the screenshot of regular add to cart button without hover

add-to-cart-button.JPG
add-to-cart-button.JPG1312×318 31.5 KB

Here is the screenshot of the add to cart button whenver we hover on it (the problem over here is that there another border appearing around the button and the existing border is getting disappeared). In this you can see that the Add to Cart button is getting slightly BIGGER in size

Screenshot (47).png
Screenshot (47).png1366×768 137 KB

Now I am going to show the add to cart button of the website just like I want: Over here in this the EXISTING BORDER COLOR i.e. #e8e8e8 is getting changed to BLUE #0C5273 color during hover effect.

Screenshot (48).png
Screenshot (48).png1366×768 70.7 KB

I hope you have understood my issue.

Please reply if you have valid solution for this

My website like for your reference is as following: www.swayur.com

Hope to get a reply soon!