# SUBMIT BUTTON GRADIENT STYLE

**URL:** <https://community.hubspot.com/t/submit-button-gradient-style/60502>\
**Category:** CMS Development\
**Tags:** starter\
**Created:** [July 7, 2022, 7:56am UTC](https://community.hubspot.com/t/submit-button-gradient-style/60502 "2022-07-07T07:56:32Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Vikshan](https://avatars.discourse-cdn.com/v4/letter/v/47e85d/32.png) [@Vikshan](https://community.hubspot.com/u/Vikshan)\
**Post date:** [July 7, 2022, 7:56am UTC](https://community.hubspot.com/t/submit-button-gradient-style/60502/1 "2022-07-07T07:56:32Z")

</div>

Hello, How would i put gradient style on my submit button?

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [July 8, 2022, 6:09am UTC](https://community.hubspot.com/t/submit-button-gradient-style/60502/2 "2022-07-08T06:09:45Z")

</div>

Hi @Vikshan,

open your theme.css and write it like this:

```lia-code-sample
form input[type="submit"]{
background: rgb(34,193,195);
background: -moz-linear-gradient(71deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
background: -webkit-linear-gradient(71deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
background: linear-gradient(71deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#22c1c3",endColorstr="#fdbb2d",GradientType=1);
{# more options #}
}

form input[type="submit"]:hover{
{# place your hover styling here #}
}

form input[type="submit"]:focus{
{# place your focus styling here #}
}

```

I recommend to use a generator like [cssgradient.io](https://cssgradient.io/) for the code.

Or - you can check out [my github repo](https://github.com/AvorB/freebie-friday/tree/main/macros) - I’ve uploaded a HubSpot gradient macro the other day.

best,

Anton

---

<div class="post-metadata">

**Author:** ![Vikshan](https://avatars.discourse-cdn.com/v4/letter/v/47e85d/32.png) [@Vikshan](https://community.hubspot.com/u/Vikshan)\
**Post date:** [July 13, 2022, 9:28am UTC](https://community.hubspot.com/t/submit-button-gradient-style/60502/3 "2022-07-13T09:28:10Z")

</div>

@Anton Thank you, I will try it and let you know if I encounter any problem