Button Border on Hover

Store Design
1

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

2

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;
}

ZestardTech_0-1738232337021.png
ZestardTech_0-1738232337021.png1802×327 269 KB

Let me know if you need further assistance!

3

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

194.png
194.png1385×398 354 KB

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

4

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;
}

ZestardTech_2-1738232985111.png
ZestardTech_2-1738232985111.png834×480 15.4 KB

Let me know if you need further assistance!