Remove border highlight around buttons when hovering

[rencafenyc]

Hi, how can I remove the border highlight that shows around all buttons on the website when the cursor is hovering over it? For example:

URL: https://rencafenyc.com/pages/contact

[EBOOST]

Hi @rencafenyc ,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code

2. Assets/base.css
3. Add code below to end of file

body .button:not([disabled]):hover::after,
body .shopify-challenge__button:hover::after,
body .customer button:hover::after,
body .shopify-payment-button__button--unbranded:hover::after {
  --border-offset: 0px;
}

[LizHoang · Accepted solution]

Hi @rencafenyc 

- You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

.button:not([disabled]):hover:after, .shopify-challenge__button:hover:after, .customer button:hover:after, .shopify-payment-button__button--unbranded:hover:after {
    --border-offset: unset !important;
}

Result: 

Best,

Liz

[Pooja-Tiwari]

Hi,
Please add this css on base.css file

.button:not([disabled]):hover:after
--border-offset: 0px;

}

[ZestardTech]

Hello @rencafenyc,

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:

.button:not([disabled]):hover:after, .shopify-challenge__button:hover:after, .customer button:hover:after, .shopify-payment-button__button--unbranded:hover:after {
    --border-offset: unset !important;
}

Let me know if you need further assistance!