# Form Submit Button styling

**URL:** <https://community.hubspot.com/t/form-submit-button-styling/14286>\
**Category:** CMS Development\
**Tags:** forms\
**Created:** [May 9, 2019, 12:01am UTC](https://community.hubspot.com/t/form-submit-button-styling/14286 "2019-05-09T00:01:10Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sarah8382](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sarah8382/32/44503_2.png) [@Sarah8382](https://community.hubspot.com/u/Sarah8382)\
**Post date:** [May 9, 2019, 12:01am UTC](https://community.hubspot.com/t/form-submit-button-styling/14286/1 "2019-05-09T00:01:10Z")

</div>

Hi There,

I’ve got a form that has a solid color submit button, however, on mobile it seems to convert it to a gradient filled button.

[https://energy-provider.energylocals.com.au/happy-2?hs\_preview=OcndMrfg-9043547880](https://energy-provider.energylocals.com.au/happy-2?hs_preview=OcndMrfg-9043547880)

I can only see it happening on an actual mobile device - not a desktop screen resized for mobile so I can’t seem to inspect the code.

Any ideas?

Thanks

---

<div class="post-metadata">

**Author:** ![sharonlicari](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sharonlicari/32/101479_2.png) [@sharonlicari](https://community.hubspot.com/u/sharonlicari)\
**Post date:** [May 13, 2019, 2:29pm UTC](https://community.hubspot.com/t/form-submit-button-styling/14286/2 "2019-05-13T14:29:01Z")

</div>

Hey @Sarah8382

Are you still having this issue? I navigate to your page from my mobile and I am not able to see what are you describing.

Could you please send me a screenshot? Also could you please send me the code you are using?

Thank you

Sharon

CC: [@jennysowyrda](https://community.hubspot.com/t5/user/viewprofilepage/user-id/3685)

---

<div class="post-metadata">

**Author:** ![Adesignl](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/adesignl/32/27362_2.png) [@Adesignl](https://community.hubspot.com/u/Adesignl)\
**Post date:** [May 13, 2019, 7:44pm UTC](https://community.hubspot.com/t/form-submit-button-styling/14286/3 "2019-05-13T19:44:34Z")

</div>

Add this to your button styles

`-webkit-appearance: none;`

that should fix it

---

<div class="post-metadata">

**Author:** ![sharonlicari](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sharonlicari/32/101479_2.png) [@sharonlicari](https://community.hubspot.com/u/sharonlicari)\
**Post date:** [May 14, 2019, 9:12am UTC](https://community.hubspot.com/t/form-submit-button-styling/14286/4 "2019-05-14T09:12:29Z")

</div>

Hey @Adesignl

Thank you for helping out 🙂

@Sarah8382 please let us know if this was helpful for you

Best,

Sharon

---

<div class="post-metadata">

**Author:** ![Sarah8382](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sarah8382/32/44503_2.png) [@Sarah8382](https://community.hubspot.com/u/Sarah8382)\
**Post date:** [May 15, 2019, 3:14am UTC](https://community.hubspot.com/t/form-submit-button-styling/14286/5 "2019-05-15T03:14:25Z")

</div>

Hi There,

Thank you, that worked!