How can I change button color and corner angle in CSS?

Shopify Discussion
1

Hi Everyone, just wondering if I can get some quick CSS help. It seems that the color is going around my button shape for some reason. I’m just trying to change the main color without that background rectangle. Also what is the code for changing the angle of the corners? Apologies ahead of time I did search on here but wasn’t able to find the specific answer. Here is a screenshot:

Thank you so much ahead of time!

BKRxV_1-1703872552178.png
BKRxV_1-1703872552178.png1279×705 175 KB

1 Like
2

Hi @BKRxV

Would you mind to explain farther what are you trying to achieve? You want a rounded corners or rectangle? Do you like to take of the rectangle shape on the buttons? And would you mind to share your store URL? Thanks!

3

You have to make sure your targeting not just the internals of the button , but the button itself and any wrapping element.

Generally while doing this you’ll also need to adjust/clear the borders , not just one elements border radius.

4

Sorry, should have explained this a bit better. The background color that I want the button to be (#0f52a3) is only applying to outside and around the button and makes it a sort of rectangle. I just want that outside color applied to the inside of the button so that it is a regular rounded button in that color. Then I was looking to see how I can alter the roundedness of the corners of the button.

Here is my store url: https://1cc569-3.myshopify.com/

Thank you so much!

1 Like
5

Thank you so much. When I go to inspect page and check what element it is, I’m pretty sure that I applied the CSS language to the most specific aspect of the button. Would you be able to help me determine if I have that correct? Really appreciate the help!

https://1cc569-3.myshopify.com/

BKRxV_0-1704296874917.png
BKRxV_0-1704296874917.png1723×714 201 KB

6

Thanks for the info, Do you mean like this?

Made4uoRibe_0-1704304440555.png
Made4uoRibe_0-1704304440555.png638×256 37 KB

If it that so check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

a.button.button--primary {
    background: #0f52a3 !important;
}

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!