如何使用CSS设置窗体内按钮的动画？

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="">

在这种情况下，如何指定a:hover和a:active属性并更改背景图像，因为我的html中没有任何值，或者有更好的方法吗？谢谢。

这应该行得通

---

尝试了以下方法：#内容表单#提交：悬停{background image:url（../img/join button.png”）不重复左上；}#内容表单#提交：活动{background image:url（../img/join button.png”）没有重复左下角；。不知何故它也不起作用。当然，我为这个创建了一个双图片。解决了。谢谢！只是从背景图像更改为背景图像

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

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

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