# Form Submit Button styling

**URL:** <https://community.hubspot.com/t/form-submit-button-styling/10690>\
**Category:** CMS Development\
**Created:** [October 23, 2018, 7:49pm UTC](https://community.hubspot.com/t/form-submit-button-styling/10690 "2018-10-23T19:49:59Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [October 23, 2018, 7:49pm UTC](https://community.hubspot.com/t/form-submit-button-styling/10690/1 "2018-10-23T19:49:59Z")

</div>

Hello friends,

Any thoughts on why the newsletter form button would appear like the attached screenshot? [This](https://www.averon.com/events/money-20-20-USA) is the page. It is the bottom form. Should be the same for desktop and mobile.

 ![Screenshot_20181023-154656_Chrome.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/f/6/f6e95210bdb9a952eedbfcd58cbf34a2317ea870.jpeg)

---

<div class="post-metadata">

**Author:** ![Stephanie-OG](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stephanie-og/32/73267_2.png) [@Stephanie-OG](https://community.hubspot.com/u/Stephanie-OG)\
**Post date:** [October 23, 2018, 9:36pm UTC](https://community.hubspot.com/t/form-submit-button-styling/10690/2 "2018-10-23T21:36:48Z")

</div>

Hi Dennis,

On desktop the button is styled with the **.hs-button.primary, input[type=“submit”], input[type=“button”]** selector but on mobile it’s being overriden with this media query:

```auto
@media (max-width: 767px) {
.content-download form.hs-form.stacked input {
 background-color: #fff;
}}

```

 ![desktop-css.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/7/73af2f18b9c507f3b1deaeebf9b848a97111357f.png)  
Desktop CSS

 ![mobile-css.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/6/1/61e8ec2e0de6e3ff5fcb571a14063c92cd239a62.png)  
Mobile CSS

You can try to figure out where that CSS is coming from and if it can be updated or you could just force the background colour on to your button on mobile. Ideally giving the form a class so that you don’t affect the colours on other forms and having something like:

```auto
@media (max-width: 767px) {
 .your-class .hs-button.primary, input[type="submit"], input[type="button"] {
 background: #00b4f0 !important;
 }
}

```

or just adding styling to the Head HTML of that page in style tags:

```auto
<style>
@media (max-width: 767px) {
 .hs-button.primary, input[type="submit"], input[type="button"] {
 background: #00b4f0 !important;
 }
}
</style>

```

I hope that helps!

* * *

[![|300](https://d2qpr2jzcazej7.cloudfront.net/original/2X/e/e6ddb445b684524bbcbd802044a9ca3919d1fbc7.png)](http://www.stephanieogaygarcia.com?utm_source=HubSpotCommunity)HubSpot Design / Development

[Website](http://www.stephanieogaygarcia.com?utm_source=HubSpotCommunity) | [Contact](http://www.stephanieogaygarcia.com/contact?utm_source=HubSpotCommunity)

_If this helped, please mark it as the solution to your question, thanks!_

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [October 23, 2018, 9:43pm UTC](https://community.hubspot.com/t/form-submit-button-styling/10690/3 "2018-10-23T21:43:41Z")

</div>

I saw it right after I submitted this..long day…