Change the color and size of Add to Cart button

There are a few styles you can apply to change the appearance of your Add to Cart button. Here is some sample code for the various elements:

Before:

After:

After with hover:

Breakdown of elements:

Code to use:

/* -- code to change add to cart button color and size -- */

.add-to-cart__wrapper .btn--clear {   
  
/* following is background color and border color */  
  background-color: #7e51fb;
  border: 1px solid #7e51fb;
  
/* following is text color */  
  color: #ffffff; 
  
/* following is text/font size */  
  font-size:1.25em; 
  
/* following increases the size of the button top/bottom padding */  
  padding-top:20px;
  padding-bottom: 20px;
  
/* following adds rounded corners */  
  border-radius:10px;
  
}

/* following is the hover state colors */  

.add-to-cart__wrapper .btn--clear:hover { 
     background-color: #333333; 
     border-color: #333333; 
     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 - */

  • Each element value change be changed. 
  • You can keep the comments in the code - Must start with /* and end with */ 
  • Use any web safe hex color code to customize the colors in the code: http://www.colorhexa.com/web-safe-colors
  • For the other elements, you can use a pixel value like 25px, 15px or any size you like. 
  • The font-size is using a scalable value of 1.25em; - You can adjust that to 1.2em, 1.1em, 1.3em, 1.5em etc.
  • Disabled state uses transparency, learn more about rgba: https://thimbleprojects.org/marianoguerra/205171/

Example when border-radius is changed to 40px;


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

Still need help? Contact Us Contact Us