Additional tips to change Add to Cart button colors

Here are some tips help make your Add to Cart button stand out better on product pages:

1

Easy: Modify the link color in your theme editor

The Add to Cart button uses the Link color value in your theme's color settings:

You can find these settings here:

A blue link color produces an Add to Cart button like this:

Use that color setting to help make your button stand out better. 

2

Code tip: Change the background color

This requires a basic code change to your CSS file. The result is a filled background color for the Add to Cart button.

Example:

Code to use for Pipeline 5.2 and higher:

/* -- Start Pipeline override code for Add to Cart button -- */
.product__submit__buttons .btn--add-to-cart {
  background-color: #333333;
  border: 1px solid #333333;
  color: #FFFFFF;
}
.product__submit__buttons .btn--add-to-cart:hover, .product__submit__buttons .btn--add-to-cart:focus {
  background-color: #cc0000;
  border: 1px solid #cc0000;
}
/* - end - */

/* following is disabled state color */
.product__submit__buttons .disabled {
    background-color: rgba(0,0,0,0.3);
    border:1px solid rgba(0,0,0,0.3);
    color: rgba(0,0,0,0.3);
}
/* - end - */

Code to use for Pipeline 5.0 to 5.1:

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

/* following is disabled state color */
.add-to-cart__wrapper .disabled {
    background-color: rgba(0,0,0,0.3);
    border:1px solid rgba(0,0,0,0.3);
    color: rgba(0,0,0,0.3);
}
/* - end - */

Code to use for earlier versions of Pipeline:

/* -- code to change add to cart button color -- */
.add-to-cart__wrapper .btn--clear { 
  background-color: #333333;
  border-color: #333333; 
  color: #ffffff; 
  &:hover{ 
  background-color: #cc0000; 
  border-color: #cc0000; 
  color: #ffffff;
  }
}

/* following is disabled state color */
.add-to-cart__wrapper .disabled {
    background-color: rgba(0,0,0,0.3);
    border:1px solid rgba(0,0,0,0.3);
    color: rgba(0,0,0,0.3);
}
/* - end - */

Note: Where to add the code is covered below.

Example with hover:

Customize the code for your preference:

(1) The value of #333333 is the hex color code for the background color (almost black). Change that value (#333333;) to any hex color code. Be sure to include the semicolon at the end. 

(2) The border color around the button. Semicolon is required at the end. 

(3) The text color (#ffffff; is white) over the button. Semicolon is required at the end. 

These are the hover colors for the button:

(4) Background hover color. You can modify the value of #cc0000; (red) to any hex color code you like. Semicolon is required at the end. 

(5) Border color for hover. Semicolon is required at the end. 

(6) Text color (#ffffff; is white) when hover is in effect. Semicolon is required at the end. 

Use any valid hex color code:

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

These are the disabled button color options, shown when a product is sold-out. Same as above, you can modify the values but using RGBa transperience values:

Reference:

http://hslpicker.com/#333333

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