How to change color of "Add to cart" button?

Store Design
1

I’d like to change the color of my Add to cart button from the stock white to a different color. I’ve tried using the code on this page (https://help.groupthought.com/article/805-additional-tips-to-change-add-to-cart-button-colors) and this page (https://help.groupthought.com/article/423-change-the-add-to-cart-button-color-and-size), but I could only get the hover color to change using the first link, nothing else. The code in the second link did nothing. I’m using the Pipeline theme.

The website address is everydayfa.com.

Thanks for any help!

2

Hello @Pthoma79 ,

  1. Go to Online Store->Theme->Edit code
  2. Asset->theme.css-> paste bellow code in bottom of file

To change color in normal view

button.btn--outline.btn--large.btn--full.btn--primary.uppercase.btn--add-to-cart {
    background: #ff0000;
    color: #fff;
    border: solid 1px green;
}

To change color on hover

button.btn--outline.btn--large.btn--full.btn--primary.uppercase.btn--add-to-cart:hover {
    background: #000;
    color: #fff;
    border: solid 1px #000;
}

Note: Change color codes a/to your need.

Thanks

3

@Guleria

I entered the code below, as instructed and the Add to cart button did not change color, but the hover color did:

button.btn–outline.btn–large.btn–full.btn–primary.uppercase.btn–add-to-cart {
background: #c50000;
color: #fff;
border: solid 1px green;
}

button.btn–outline.btn–large.btn–full.btn–primary.uppercase.btn–add-to-cart:hover {
background: #505050;
color: #fff;
border: solid 1px #000;
}

Am I missing something?

4

Still looking for a solution to this if anyone has any ideas…