How to remove border around circular button

[survivalsquadau]

Hi Shopify community,

Hope you can help.

I have just added some changes to my base.css to make buttons circular, however, it has left a square border on all of these buttons.

Is it possible to:

1. Remove the square border BUT don’t apply this to the add to cart button (and maybe other similar buttons as they’re not filled

2. Also make the add to cart, buy now and other checkout buttons circular?

URL is: survivalsquad.com

Thank you!!

[ZestardTech]

Hello There,

Please share your store URL and Screenshot.
So that I will check and let you know the exact solution here.

[NomtechSolution]

To remove the square border from circular buttons in your base.css file while excluding the “Add to Cart” button and making certain checkout buttons circular, you can follow these steps:

1. Open your base.css file in a code editor or the Shopify theme editor.

2. Locate the CSS code that defines the circular buttons. It might look something like this:

.button {
  border-radius: 50%;
  /* Other button styles */
}

• To remove the square border from all circular buttons except the “Add to Cart” button, you can add a specific class to the “Add to Cart” button in your HTML code. For example, let’s assume you add the class “add-to-cart-btn” to the “Add to Cart” button.

• Modify the CSS code for the circular buttons to exclude the “add-to-cart-btn” class and remove the square border. Here’s an example:

.button:not(.add-to-cart-btn) {
  border: none; /* Remove the border */
  /* Other button styles */
}

• This code applies the border removal only to buttons that do not have the “add-to-cart-btn” class.

  1. To make the “Add to Cart,” “Buy Now,” and other checkout buttons circular, you can add specific CSS code for those buttons. Assuming you use a class “checkout-btn” for these buttons, you can add the following CSS code:

.checkout-btn {
  border-radius: 50%; /* Make the buttons circular */
  /* Other button styles */
}
​

[oscprofessional]

Hello @survivalsquadau

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->styles.css>Add this code at the bottom.

.why-choose-us-content ul li:not(:last-child) {
    border-bottom: none !important;
}
.pay-with .buy-now {
    border-radius: 22px !important;
}
.payment-plan a {
   border-radius: 22px !important;
}
.feature-right-info .buy-now {
    border-radius: 22px;
}

[survivalsquadau]

Hi @oscprofessional ,

Thanks for sharing your knowledge.

I do not have a styles.css file, however, I tried adding these to the base.css file and it didn’t help. Any ideas?

[survivalsquadau]

Hi @ZestardTech

Site URL is: survivalsquad.com.au
Screenshot attached.

Thanks

[oscprofessional]

Hello @survivalsquada

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add code at the bottom that i provided to you above.

[survivalsquadau]

@oscprofessional I already tried, but it didn’t apply the changes.

[oscprofessional]

Hello @survivalsquadau

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

a.button.button--primary::after {
    box-shadow: none !important;
}