# Adding gradient color on header button

**URL:** <https://community.elfsight.com/t/adding-gradient-color-on-header-button/140674>\
**Category:** Platform Tips\
**Tags:** squarespace\
**Created:** [October 17, 2025, 2:32am UTC](https://community.elfsight.com/t/adding-gradient-color-on-header-button/140674 "2025-10-17T02:32:37Z")\
**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:** [October 17, 2025, 2:32am UTC](https://community.elfsight.com/t/adding-gradient-color-on-header-button/140674/1 "2025-10-17T02:32:37Z")

</div>

To adding gradient color on header button like [this site](https://www.sparkplugin.com/pricing?via=tuan).

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

You can use this code to Custom CSS.

```auto
header#header a.btn {
    background-image: linear-gradient(-45deg,#ff576a,#f100cc) !important;
    border: none !important;
}

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/f/9/f970b8859f190feaa82372bb7105f271c928d0cc.jpeg)

Update gradient color here.

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