CSSでフォーム内のボタンをアニメーション化する方法は？フォームで

Question

のindex.html：今

<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" class="input-submit" type="submit" name="subscribe" value=""> 

CSS：

#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; 

すると、この場合に指定する方法：置いて：活性特性と私はないそうであるように背景画像を変更私のhtmlには何か値がありますか、これを行うには良い方法がありますか？ありがとう。

Answer 1

これは、あなたがHTMLを供給できる

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

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