Additional tips to change Add to Cart button colors

Note:
Groupthought does not provide any warranty or further support for this code. Use this code at your own risk. The code provided below is only a suggestion. You are responsible for any and all code customizations made to your theme. Please work with a developer or Shopify Expert to ensure proper customization. This code may not work with all versions of of Pipeline or with other code customizations and apps you may have installed. We strongly recommend that you make duplicate of your theme before adding or changing any code in your theme.
This tutorial is intended for use with the Pipeline theme.

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