# Add to Cart button gradient

**URL:** <https://community.elfsight.com/t/add-to-cart-button-gradient/55544>\
**Category:** Platform Tips\
**Tags:** squarespace\
**Created:** [June 4, 2024, 3:24am UTC](https://community.elfsight.com/t/add-to-cart-button-gradient/55544 "2024-06-04T03:24:01Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![tuanphan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/tuanphan/32/3165_2.png) [@tuanphan](https://community.elfsight.com/u/tuanphan)\
**Post date:** [June 4, 2024, 3:24am UTC](https://community.elfsight.com/t/add-to-cart-button-gradient/55544/1 "2024-06-04T03:24:01Z")

</div>

To make Add to Cart button gradient on Squarespace, you can use this code to Custom CSS box.

```auto
/* Add to Cart button gradient */
div.sqs-add-to-cart-button {
    background-image: linear-gradient(to right,#c7b7a6,#f1f);
}

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/5/8/581cb5ec15a2d607b366a24b3029428bb9497aae.jpeg)

result

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/5/4/54e8596e702a902b2bbac9affc37827fc4cef2cf.png)