how to animate a button inside a form with CSS?

index.html with a form:

<form id="mc-embedded-subscribe-form" class="validate" name="mc-embedded-subscribe-form" method="post" action="mailing.php"><pre>
<fieldset>
<div class="mc-field-group">
<div class="input-cont">
<input id="email" class="required email input-text example" type="text" name="email" value="Your email address" onfocus="value=''" style="color: rgb(178, 178, 178);">
</div>
</div>
<div class="submit-cont">
<input id="submit" c开发者_StackOverflowlass="input-submit" type="submit" name="subscribe" value="">

CSS right now:

#content form #submit {
    background: url("../img/join-button.png") no-repeat left top;
    border: 0 none;
    color: #221505;
    cursor: pointer;
    float: right;
    font-size: 23px;
    font-weight: 800;
    height: 46px;
    outline: 0 none;
    position: relative;
    top: 1px;
    width: 102px;

How in this case to specify a:hover and a:active properties and change a background images as I do not have any values in my html or is there a better way to do this? Thanks.

This should work

#content form #submit:hover {
  background-image: ...
}

#content form #submit:active {
  background-image: ...
}