變化位置時懸停效果至CSS3

我有一個使用圖像作爲按鈕，當用戶將鼠標懸停按鈕圖像被realocated到其他位置等的CSS文件：變化位置時懸停效果至CSS3

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>

這樣做後，一個按鈕將出現保存圖像具有的文本。它工作很好。

但是，如果文本是一個變量，我不能這樣做，我將不得不爲不同的文本做一個不同的圖像...這是不好的。

我想產生一個輸入按鈕通過按鈕屬性的文本，並有同樣的效果，我有兩個問題：

如何生成正確的顏色，並得到inmediatly到其他顏色時，懸停。（你知道什麼好發生器）我的基色是#7d7d7d和最終#272727
如何避免我的按鈕，一個奇怪的效果，當懸停它像動畫或滑動，並沒有這樣做直線距離，請拍下看看我的小提琴

請你幫我acomplish最後一個按鈕（即無滑動效果，我的意思是變色inmediatly當懸停）shown in this fiddle？

來源

2013-03-19 cMinor

你需要用CSS做所有事情，而不是使用圖像，所以你不必爲不同的文本製作一堆圖像。檢出this site用於快速生成梯度代碼。否則，你的按鈕是相當簡單的，可以很容易地使用CSS。讓我知道如果我錯過了你的問題的重點。

來源

2013-03-19 01:07:21 dezman

你是對的，但你知道如何糾正代碼或我錯過了什麼，因爲它不是在我的小提琴工作，也問題是有關如何改變懸停時的顏色.... – cMinor 2013-03-19 01:16:49

變化位置時懸停效果至CSS3

回答

相關問題