HTML Button background-color property does not work

Question

In the following page:

I have a gray button (see the section with first book, it is the only gray button of the page) but it is expected to be a blue one. I cut&paste the code from a Mail service (see below). The property: background-color: #47abd5; does not work. Why?

<style>
    #mlb2-3734193 button.ml-subscribe-button {
        cursor: pointer;
        font-family: Open Sans!important;
        font-size: 24px !important;
        height: 60px;
        width: 250px;
        background-color: #47abd5;
        color: #ffffff!important;
        border: none;
        border-radius: 2px;
        padding: 0px 24px;
    }
</style>
<link href="https://fonts.googleapis.com/css?family=Open+Sans&   subset=latin,latin-ext" rel="stylesheet" type="text/css">
<form id="mlb2-3734193" action="//app.mailerlite.com/webforms/popup/z0d1n7" data-code="z0d1n7" data-id="243593" target="_blank">
    <div stylclass="button-preview">
        <button style="background-color: #47abd5;" type="submit" class="ml-subscribe-button">Iscriviti</button>
    </div>
</form>
<script type="text/javascript" src="//static.mailerlite.com/js/w/button.min.js?veb3acdd46bf692c067c6a9fe9fbc07d6"></script>

Answer 1

Because of this css being applied to your button.

a.button,
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #dfdfdf), color-stop(1, #ffffff));
  background: -ms-linear-gradient(bottom, #dfdfdf, #ffffff);
  background: -moz-linear-gradient(center bottom, #dfdfdf 0%, #ffffff 100%);
  background: -o-linear-gradient(#ffffff, #dfdfdf);
}

There is a background gradient which is overwriting your styles I suppose. As @Turnip suggests change it to background instead of background-colour and it will work

Answer 2

remove background-color property just use background like this:

#mlb2-3734193 button.ml-subscribe-button {
       background: #47abd5;
        }