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

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

BKRxV
Tourist
8 0 4

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

 

 

Replies 5 (5)

Made4uo-Ribe
Shopify Partner
10038 2387 3014

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!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
BKRxV
Tourist
8 0 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!

Made4uo-Ribe
Shopify Partner
10038 2387 3014

Thanks for the info, Do you mean like this?

Made4uoRibe_0-1704304440555.png

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!

 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

PaulNewton
Shopify Partner
7722 678 1626

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.

Contact paull.newton+shopifyforum@gmail.com for the solutions you need


Save time & money ,Ask Questions The Smart Way


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Thank Paul with a Coffee for more answers or donate to eff.org


BKRxV
Tourist
8 0 4

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