Remove Button Hover Border

Shopify Discussion
1

Me again!

Screenshot 2024-07-27 at 2.07.13 PM.png
Screenshot 2024-07-27 at 2.07.13 PM.png2070×1336 268 KB

Can anyone help me figure out how to remove the button hover border on all my buttons? or how to change the color so it matches my hover background? I have tried several of the codes from other Shopify questions, but nothing has worked.

I also have all this custom CSS coding on the admin side for each section with a button. I have tried pasting it on my base.css and theme.liquid, but it won’t show up on the site. Can someone help me figure out where this code needs to be pasted or where I need to edit the existing code on the back end so it affects all my buttons and I can remove it from the admin side?

.card__heading {
text-transform: capitalize;
}
.card__heading {
font-size: 13px !important;
}
.card__heading {
font-family: “Montserrat” !important;
}
.card__heading {
letter-spacing: 1px !important;
}
.price .price-item {
font-size: 13px !important;
}
.price .price-item {
font-family: “SundaysRegular” !important;
}
.button {
font-size: 16px !important;
}
.button {
font-family: “SundaysRegular”;
letter-spacing: 2px !important;
box-shadow: none;
background-color: #707b7a;
}
.button:hover {
background-color: #d5cec4;
color: #ffffff;
}

website: riveringroots.com

pass: rtawqpt

Thank you!

2

Have you already resolved this issue? I’m not seeing any border around the button.

3

Hi,

No, I haven’t. I made the hover background color the same as the border so you couldn’t see the border. I changed it to be lighter so you can now see the border if you want to go back and take a look. I can leave it like this, which is fine, but I have this same issue on my product page’s ‘add to cart’ button + contact page button except now I can’t even change the background color.

I’m not sure if there’s something I did in the coding that messed it up but I’d love to delete whatever I may have done so I can change the button colors and their hover colors without a border if possible.

4

Hi @riveringroots

Add the below CSS to bottom of base.css file. Change the color of border accordingly.

.button:after, .shopify-challenge__button:after, .customer button:after, .shopify-payment-button__button–unbranded:after{
box-shadow: none;
border: 1px solid #000; // change border color accordingly}

Hope this will helpful!

Please mark it as a solution if this will helpful to resolve your issue.

Thanks!