Button Border on Hover

Store Design

Topic summary

A user seeks to remove the black border that appears on hover for buttons in two locations: product pages and the “Image with text” section on the homepage.

Solutions Provided:

Two responders offered CSS code snippets to address the issue:

  • For homepage buttons (Image with text section): Add CSS targeting .banner__buttons > a.button:hover with border: none !important;

  • For product page buttons: Add CSS targeting .product-form__buttons > button.product-form__submit:hover with border: none !important;

  • An alternative solution modifies the box-shadow property on .button:not([disabled]):hover:after

Implementation:
All solutions require navigating to Online Store > Themes > Actions > Edit Code > base.css and pasting the provided code at the end of the file.

Screenshots were included demonstrating the code placement and expected results. The discussion remains open, awaiting confirmation from the original poster on whether the solutions resolved the issue.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
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!