html - 将悬停效果更改为 css3 时更改图像的位置

Question

我有一个使用图像作为按钮的 css 文件，当用户将鼠标悬停在按钮上时，图像会重新分配到其他位置，例如:

button.btn,
input[type="submit"].btn {
  *padding-top: 2px;
  *padding-bottom: 2px;
    background: url(http://www.eurekavi.com/ci_crud_1/assets/grocery_crud/themes/flexigrid/css/images/btn_cancelar.png) no-repeat;
    border: none;
    cursor: pointer;
    display: block;
    height: 30px;
    text-indent: -3000px;
    width: 80px;

}

button.btn,
input[type="submit"].btn:hover  {
background: url(http://www.eurekavi.com/ci_crud_1/assets/grocery_crud/themes/flexigrid/css/images/btn_cancelar.png) no-repeat 0 -30px;
    }

在 html 中我添加代码:

<div class="form-button-box">
    <input type="submit" value="" class="btn btn-large" />
</div>

完成此操作后，将出现一个按钮，其中包含图像所含的文本。效果很好。

但是，如果文本是一个变量，我就不能那样做，我将不得不为不同的文本制作不同的图像……这不好。

我想生成一个输入按钮，将按钮的文本作为属性传递并具有相同的效果，我有两个问题:

1. 如何在悬停时生成正确的颜色并立即转换为其他颜色。 (你知道什么好的发电机)我的底色是#7d7d7d最后#272727

2. 如何避免我的按钮出现奇怪的效果，当悬停时它就像动画或滑动而不是直接做，请看看我的 fiddle

你能帮我完成最后一个按钮吗(没有那个滑动效果，我的意思是悬停时立即改变颜色)shown in this fiddle ？

Answer 1

您需要使用 CSS 来制作所有内容，而不是使用图像，这样您就不必为不同的文本制作一堆图像。查看this site用于快速生成梯度代码。否则，您的按钮相当简单，可以轻松地使用 CSS 制作。如果我遗漏了您问题的要点，请告诉我。