Button Border on Hover

[TBS2023]

Hello

Both on my product page or on my home page - Image with text section.

My hover button has a black border which i would like to remove

can anyone advise

rgds

www.yogaspirit.mu

[ZestardTech]

Hello @TBS2023,

Here are the steps to apply the necessary changes in your Shopify store:

1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
2. Locate Asset > base.css and paste the following code at the bottom of the file:

.banner__buttons> a.button:hover {
    border: none !important;
}

Let me know if you need further assistance!

[Rahul_dhiman]

Hello @TBS2023 
Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.

.button:not([disabled]):hover:after, {
box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(255,255,255, calc(1 - 0)), 0 0 0 calc(var(--buttons-border-width) + 0.5px) rgba(var(--color-button), var(--alpha-button-background));
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[ZestardTech]

Hello @TBS2023,

Below is the CSS for your product page button. Please set it up following the same approach as outlined above to ensure consistency and maintain the desired design.

.product-form__buttons>button.product-form__submit:hover {
    border: none !important;
}

Let me know if you need further assistance!