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>

执行此操作后，将出现一个按钮，其中包含图像所具有的文本。它很好用。

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

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

如何生成正确的颜色，并在悬停时立即获得其他颜色。（你知道任何好的发电机）我的基色是#7d7d7d和最终#272727
如何在我的按钮中避免奇怪的效果，当悬停它就像动画或滑动而不是直接做，请看看我的小提琴

你能不能请我帮我完成最后一个按钮（没有滑动效果，我的意思是在悬停时改变颜色）shown in this fiddle？

Answer 1

您需要使用CSS制作所有内容而不使用图像，这样您就不必为不同的文本制作一堆图像。查看this site以快速生成渐变代码。否则，您的按钮非常简单，可以使用CSS轻松制作。如果我错过了你的问题，请告诉我。

将鼠标悬停效果更改为css3时图像的位置

1 个答案: