Change the Add to Cart button color and size

The Add to Cart button color can be easily changed by using the Link color setting under Theme settings:

The Link color will also change other link elements including size chart, vendor, select option arrows and share links:

The Accent color is used for the background color of the Buy It Now Dynamic Checkout button:

You can make the Add to Cart button a solid color by using a code snippet. 

Here's an example of the Add to Cart with a Black background color (#333333) with White text (#FFFFFF) and a hover state background Grey color (#999999):

Code snippet to use:

/* -- Start Pipeline override code for Add to Cart button -- */
.add-to-cart__wrapper .btn--clear {    
  background-color: #333333;
  border: 1px solid #333333;  
  color: #FFFFFF; 
  font-weight: 500;
  &:hover,
  &:focus {
    background-color: #999999;
    border: 1px solid #999999;
  }
}
/* - end - */

Where do I add the code?

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code

Notes

For a bold font, you can change the value from 500 to 900

hex color code references:

http://www.colorhexa.com/web-safe-colors

https://picular.co/

Increase the size of the Add to Cart button

To make the Add to Cart button larger, you can add some padding into the code. 

Add these two lines of code and adjust the 30px; values to your preference:

Sample code with black background and padding added:

/* -- Start Pipeline override code for Add to Cart button and size -- */
.add-to-cart__wrapper .btn--clear {
  padding-top:30px;
  padding-bottom: 30px;
  background-color: #333333;
  border: 1px solid #333333;  
  color: #FFFFFF; 
  font-weight: 500;
  &:hover,
  &:focus {
    background-color: #999999;
    border: 1px solid #999999;
  }
}
/* - end - */