How can I remove the hover white border around buttons?

Store Design
,

Topic summary

A user is trying to remove an unwanted white border that appears around buttons on hover. The issue is that this white element isn’t a traditional CSS border—the actual border is black and surrounds the white area.

Technical Details:

  • The site in question is www.taneraskin.com
  • The user has attempted to modify the base.css file but hasn’t succeeded
  • Code snippets show button styling with pseudo-elements (::before and ::after)

Proposed Solution:
A PageFly representative suggested adding CSS code to hide the secondary button’s ::after pseudo-element on hover:

.button--secondary:hover::after {
  display: none;
}

Current Status:
The issue remains unresolved. Another user reports experiencing the same hover effect problem even after applying the suggested code and adjusting button thickness settings. The discussion is ongoing with no confirmed fix yet.

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
1

Hi there,

I tried to remove the white “border” around all my buttons when hovering over them, but I can’t find a way.

The problem is, it doesnt seem to be a border. The real border is black and goes around the white one. Do you know what it is and how to change it??

URL: www.taneraskin.com

Here is the code from base.css I tried to modify:

.button,
.shopify-challenge__button,
.customer button {
display: inline-flex;
justify-content: center;
align-items: center;
border: 1px solid #c43b78 !important;
padding: 0 3rem;
cursor: pointer;
font: inherit;
font-size: 1.5rem;
text-decoration: none;
color: #c43b78;
transition: none;
-webkit-appearance: none;
appearance: none;
background-color: white;
}

.button:before,
.shopify-challenge__button:before,
.customer button:before,
.shopify-payment-button__button–unbranded:before,
.shopify-payment-button [role=“button”]:before,
.cart__dynamic-checkout-buttons [role=‘button’]:before {
content: ‘’;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
}

.button:after,
.shopify-challenge__button:after,
.customer button:after,
.shopify-payment-button__button–unbranded:after {
content: ‘’;
position: absolute;
top: var(–buttons-border-width);
right: var(–buttons-border-width);
bottom: var(–buttons-border-width);
left: var(–buttons-border-width);
z-index: 1;
border-radius: var(–buttons-radius);
box-shadow: 0 0 0 calc(var(–buttons-border-width) + var(–border-offset)) rgba(var(–color-button-text), var(–border-opacity)),
0 0 0 var(–buttons-border-width) rgba(var(–color-button), var(–alpha-button-background));
transition: none;

/CHANGE BUTTON HOVER COLOR/
}
.button:hover{
background: #111111 !important;
color: #ffffff !important;
border: 1px solid #111111 !important;
}

.button:not([disabled]):hover::after,
.shopify-challenge__button:hover::after,
.customer button:hover::after,
.shopify-payment-button__button–unbranded:hover::after {
–border-offset: 0px;
box-shadow: 0 0 0 calc(var(–buttons-border-width) + var(–border-offset)) rgba(var(–color-button-text), var(–border-opacity)),
0 0 0 calc(var(–buttons-border-width) + 1px) rgba(var(–color-button), var(–alpha-button-background));
}

.button–secondary:after {
–border-opacity: var(–buttons-border-opacity);
}

Best,

Isabelle

2

Hi @isabellemaria ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/base.css->paste below code at the bottom of the file:

.button--secondary:hover:after {
    display: none;
}

Hope my answer will help you.

Best regards,

Victor | PageFly

3

Still trying to figure this one out. After changing the theme’s button thickness it went away - but the hover aspect is still happening even after applying the above code.