Outline of Add to Cart button dissapears on hover

Solved
survivalsquadau
Tourist
7 0 4

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

Accepted Solution (1)
Made4uo-Ribe
Shopify Partner
4263 985 1202

This is an accepted solution.

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

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. 

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Replies 3 (3)
Made4uo-Ribe
Shopify Partner
4263 985 1202

This is an accepted solution.

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

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. 

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


survivalsquadau
Tourist
7 0 4

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.

Made4uo-Ribe
Shopify Partner
4263 985 1202

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

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

 

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com