How to remove the black border or box around the Add to Cart button?

Technical Q&A
,
1

Hi everyone,

I am using Custom CSS within “Product Information” when customising my Dawn 8.0 theme. I do not want to edit the base.css because I only want to make changes to the “Add to Cart” button on the product pages.

So far I have:

.button {
background: #bf3356 !important;
color: white !important;
border: none !important;
border-radius: 15px !important;
alpha-button-background: none !important;
}
.banner__box {
background: transparent !important;
}

The button is the right shape and colour, but it has a rectangular box around it.

candiced_0-1677298313251.png
candiced_0-1677298313251.png524×297 4.98 KB

What code can I use to get rid of the black outline box?

Much appreciated.
Candice

2

Share your Store URL and password if enabled

3

Hello @candiced

Can you give me your page URL( with pass if your store password is enabled) so I can check it and maybe give you a solution?

Kind & Best regards,
GemPages Support Team

4

Hi @candiced

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the css file:
.shopify-payment-button__button.shopify-payment-button__button–unbranded: after,
.shopify-payment-button__button.shopify-payment-button__button–unbranded:hover:after {box-shadow: none !important;}

Regards,

San

5

Hi @INA_MSWEB San,

Thanks for your reply. But unfortunately it did not work.

Candice

6

Hi Moeed,

Thanks for your reply!

Can I share a preview as I have not yet published Dawn 8.0?

https://n5elz7bv7w6hqol6-71189528878.shopifypreview.com

Candice

7

Hi GemPages,

Thanks for your reply!

Can I share a preview as I have not yet published Dawn 8.0?

https://n5elz7bv7w6hqol6-71189528878.shopifypreview.com

Candice

8

Hi @GemPages & @Moeed ,

I have published Dawn 8.0 and saved a copy of the previous version. So now you can access with password instead.

Website: www.lumiinate.co.uk

password:crackthis

Thanks,
Candice

9

Hey @candiced

You need to follow these steps

  1. Go to Online Store
  2. Edit Code
  3. In your Assets folder, find base.css file
  4. Click on the file and open it
  5. Press CTRL+F and find the code below
  6. Once you find the code, just remove that code and the border will be removed.
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));

Thank you!

10

Hi [email removed]Candiced**,**

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file section-main-product.css

Step 3: Paste the below code at bottom of the file → Save

.product-form__submit:after{display:none !important}

PageFlyVictor_0-1677730370818.png
PageFlyVictor_0-1677730370818.png1370×478 11.9 KB

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

4 Likes
11

@PageFly-Victor Thank you! This worked perfectly. Can you explain the logic behind it for my understanding?

12

the border is a: after CSS of the .product-form__submit element. So when displaying none, it will don’t show the border