Impossible to style the form submit button - html

Question

Edit: Solved, see comments!
I've read a few posts about styling submit buttons in forms, but it only seems to partially work with me. I'm able to change the border, but not the background color or font settings. Can someone please tell me what's wrong with my code? I'm new to forms, so I could have just n00bed. I've tried background, background-color, hexadecimal values... I just am stumped.
#submitButton {
color: black;
background: #cac9c9;
border: 4px solid blue;
}
<form action="#" method="post">
<input type="text" value="user#domain.com" />
<div class="clear"></div>
<hr />
<div id="checkboxContainer">
<span>Select the newsletters you'd like to receive</span>
<input type="checkbox" name="travel" value="Getaways" />
<label>Destinations & Getaways</label>
<br />
<input type="checkbox" name="travel" value="Tips" />
<label>Weekly Travel Tips</label>
</div>
<input id="submitButton" type="submit" value="SIGN UP" />
</form>

Answer 1

Click for demo
Css
.classname {
-moz-box-shadow:inset 0px 1px 0px 0px #bee2f9;
-webkit-box-shadow:inset 0px 1px 0px 0px #bee2f9;
box-shadow:inset 0px 1px 0px 0px #bee2f9;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #63b8ee), color-stop(1, #468ccf) );
background:-moz-linear-gradient( center top, #63b8ee 5%, #468ccf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#63b8ee', endColorstr='#468ccf');
background-color:#63b8ee;
-webkit-border-top-left-radius:20px;
-moz-border-radius-topleft:20px;
border-top-left-radius:20px;
-webkit-border-top-right-radius:20px;
-moz-border-radius-topright:20px;
border-top-right-radius:20px;
-webkit-border-bottom-right-radius:20px;
-moz-border-radius-bottomright:20px;
border-bottom-right-radius:20px;
-webkit-border-bottom-left-radius:20px;
-moz-border-radius-bottomleft:20px;
border-bottom-left-radius:20px;
text-indent:0;
border:1px solid #3866a3;
display:inline-block;
color:#14396a;
font-family:Arial;
font-size:15px;
font-weight:bold;
font-style:normal;
height:50px;
line-height:50px;
width:86px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #7cacde;
}
.classname:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #468ccf), color-stop(1, #63b8ee) );
background:-moz-linear-gradient( center top, #468ccf 5%, #63b8ee 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#468ccf', endColorstr='#63b8ee');
background-color:#468ccf;
}.classname:active {
position:relative;
top:1px;
}
I forked your jsfiddle example and solution is here it works