Outline of Add to Cart button dissapears on hover

Technical Q&A
,
1

Hi Shopify community,

I made some changes to my theme code some time ago and since then, the outline of the add to cart button on my product pages dissapears on hover. Here’s a product page for reference.

Any help would be appreciated to restore the outline on hover.

Thanks

Seb

2

Hi @survivalsquadau ,

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
button.product-form__submit.button.button--full-width.button--secondary:hover {
    border: 1px solid #1B8649;
}

Result:

Ribe_Dagandara_0-1690333792455.png
Ribe_Dagandara_0-1690333792455.png504×219 5.67 KB

This is the result when it hover. There is a border-radius in your base.css for this button. If you dont like this radius you can take out by finding the code and remove.

Ribe_Dagandara_1-1690333893135.png

i hope it help.

3

Thanks @Made4uo-Ribe . That worked, but I wanted to ask if you could help with stopping the button from becoming rounded on hover? A lot of my other buttons are rounded so I need to find a way to only apply this change to these kind of buttons?

Thanks.

4

Try this one. Same instruction. Thats is also my concern when I give you the code.

.button {
    border-radius: 0px !important;
}