What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Change add to cart border color for hover in Dawn theme

Solved

Change add to cart border color for hover in Dawn theme

Sbaizer
Tourist
5 1 2

Hello,

 

I would like to change the border color of my add to cart button when the customer hovers/clicks on the button to be the same color as the background (#f15822).  Here is the code I have, which works to change the background and font color, but not the border:

.product-form__submit:hover {
background-color: #f15822 !important;
color: white !important;
border-color: #f15822 !important;
}

or 

.product-form__submit:hover {
background-color: #f15822 !important;
color: white !important;
border: 2px solid #f15822 !important;
}

I appreciate any insight you all can provide me with.

Accepted Solution (1)
Sbaizer
Tourist
5 1 2

This is an accepted solution.

Hello, thank you for pointing out the box-shadow!  I added the following code to my base.css file and it worked to remove the border.

.button:not([disabled]):hover:after{box-shadow: none;}

View solution in original post

Replies 3 (3)

Made4uo-Ribe
Shopify Partner
9186 2191 2709

Hi @Sbaizer 

You change the border-color but did you check if there is box-shadow on that borders? Would you mind to share your Store URL website? with password if its unpublish. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
Sbaizer
Tourist
5 1 2

This is an accepted solution.

Hello, thank you for pointing out the box-shadow!  I added the following code to my base.css file and it worked to remove the border.

.button:not([disabled]):hover:after{box-shadow: none;}
Made4uo-Ribe
Shopify Partner
9186 2191 2709

And you add the border-color? 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.