Rounding Button Corners In Atlantic Theme

[Nahome-Tegegne]

Hey guys, 

do you know how I can round up the buttons on my Atlantic Theme website? I don't like the way it is right now. Thank you in advance. 

[AvadaCommerce]

Hi @Nahome-Tegegne ,

Please share your store URL and if your store is password protected then please provide password too.
You can take a picture of the place you want to edit.

So that we can help you.

[Nahome-Tegegne]

https://9cc56tyu8cbvudjo-45586972837.shopifypreview.com/

This is the preview. 

[ThreeCee]

To do this you'll most likely have to edit the styling of the buttons in your code. 

But before you try anything, I would duplicate your theme so you have the freedom to test if your changes work without risking messing things up.

To duplicate your theme;

Go to Online store, Themes, Actions, and click Duplicate

To Edit the button styling, 

Click "Actions" on the theme that was created when you clicked duplicate

Click edit code

Then you'll want to find where the buttons get their style from, you can search "button" in the top left search bar on your edit code page. (I'd tell you where but I can't tell for sure where it will be without looking). 

Once you do find it, you can try changing the styling of the corners by editing the "border-radius px," if you don't see "radius" then you may also be able to add that function with this;

border-radius: 4px;

The higher the number on that line above, the more of a curve the button will have.  (100 should make the buttons full circles)

Again, if you're not comfortable playing around with the code make sure to duplicate your theme first so that if anything does get messed up, nothing will affect your live store. If this does work for you, do exactly what you did but now on your live store. 

Hope this helps.

[KetanKumar]

@Nahome-Tegegne 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[Nahome-Tegegne]

Thank you for your reach out. This is the preview of the website. 

https://nfpdpjzrbzj1pspi-45586972837.shopifypreview.com

[KetanKumar]

@Nahome-Tegegne 

yes, please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

.call-to-action {
    border-radius: 100px !important;
}

[Nahome-Tegegne]

Thank You! It didn't round up all buttons. Is it also possible to round up this buttons down below?