Remove button border on hover

Store Design
, ,

Topic summary

A user seeks CSS code to remove button borders on hover specifically on their Shopify cart page, without affecting buttons on other pages. An image shows the button in question with visible borders.

Three solutions were proposed:

  1. Moeed’s approach: Add CSS code in theme.liquid file above the </body> tag (specific code not visible in markup)

  2. Mustafa_Ali’s solution: Insert CSS targeting :hover::after with box-shadow: none !important; within <style> tags in theme.liquid

  3. Rahul_dhiman’s method: Add .button:not([disabled]):hover:after CSS rule with --border-offset: 0px; at the end of base.css file

All solutions involve editing theme files through the Shopify admin panel (Online Store → Themes → Edit Code). The discussion remains open with no confirmed resolution or feedback on which solution worked best for the cart-page-specific requirement.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I would like to remove the borders of this button on hover and in general on my cart page, without changing it for other pages as well. Can anyone help with the css code ?

Daniel19901_0-1742891319905.png
Daniel19901_0-1742891319905.png821×729 13.8 KB

1 Like
2

Hey @Daniel19901

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1742892117847.png
Moeed_0-1742892117847.png702×692 12.7 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3 
:hover::after {
    box-shadow: none !important;
}

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the tag before the body ----->
if this code work please do not forget to like and mark it solution

MustafA16_0-1742892706891.png
MustafA16_0-1742892706891.png623×531 11.8 KB

4

Hello @Daniel19901
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, {
--border-offset: 0px;
}

Thanks