Change Add to Cart & Sold Out button colours

[YukonPete]

I'm looking to change the background colour and font colour for both the "Sold Out" and "Add to Cart" buttons (not sure of their technical name) on a product page.

I'd like to make the following changes.

ADD TO CART

Background: #EFEFEF

Text: FFFFFF

SOLD OUT

Background: #EFEFEF

Text: FFFFFF

You can look at the site I'm working on here https://charliepickles.shop/products/oh-my-heart-calming-mask

The theme is Pipeline.

There is no base.css file, though there is theme.liquid and custom.css. I mention these as a lot of what I've researched mentions them.

[Made4uo-Ribe]

Hi @YukonPete 

The result of the color you choose is like this. 

On the sold out it okay but on the add to cart its not adviceable. 

[YukonPete]

Hey, yeah that's fair. Just what was asked of me but I'll update the colours. Question still stands, if anyone can help 🙂 I can change up the hex later.

[Made4uo-Ribe · Accepted solution]

got it, i add some comment so it will be easier for you to change it. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes"
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

<style>
/* this is for the sold-out */
.variant--soldout .btn--add-to-cart {
    background: pink;
}
.variant--soldout .btn-state-ready {
    color: black;
}

/* This is for the add to cart button.  */
.btn--outline.btn--full.btn--primary.btn--add-to-cart {
    background: red;
}

.btn--add-to-cart .btn-state-ready {
    color: white;
}

</style>

• And Save. 
• Result:
  

 Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[YukonPete]

Hey, thank you that worked out perfectly! The only question I have is regarding using a colour #. If I write blue, red, white, etc I can update the colours, but when I put in a hex such as FF8080, it defaults to the theme colour scheme. Any advice?

[Made4uo-Ribe]

did you write it correctly? 

[YukonPete]

I thought so, but I must be missing something.