0

我有一个使用图像作为按钮的 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. 如何避免我的按钮出现奇怪的效果，当悬停时它就像动画或滑动而不是马上做，请看看我的小提琴

你能帮我完成这个小提琴中显示的最后一个按钮（没有那种滑动效果，我的意思是在悬停时立即改变颜色）吗？

4

1 回答 1

0

您需要使用 CSS 制作所有内容，而不是使用图像，因此您不必为不同的文本制作一堆图像。查看此站点以用于快速生成渐变代码。否则，您的按钮相当简单，并且可以使用 CSS 轻松制作。如果我错过了你的问题的重点，请告诉我。

于 2013-03-19T01:07:21.863 回答