Gradient Add to Cart Button

Gradient_Product_Button.png

Description

Add a gradient color style to the add to cart product button. This plugin uses css editor and works with all template families.


How To Install

From your Squarespace account, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.

// Gradient Add To Cart Product Button //

.ProductItem-details .sqs-add-to-cart-button {
  font-size: 16px;
  padding: 20px;
  background: linear-gradient(to right, #F07C63, #E45372);
}

Customize

Swap out both of the background color values with the colors of your choice.

Adjust the font size and padding values to your liking. The higher the box shadow and padding px = the bigger the button.


Previous
Previous

Solid Drop Shadow Add To Cart Button

Next
Next

Shivering Button