change position of image when hover effect to css3

[usawarez]

I have a css file that uses an image as button, when user hovers the button the image is realocated to other position like:\[code\]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; }\[/code\]In html i add the code:\[code\]<div class="form-button-box"> <input type="submit" value="" class="btn btn-large" /></div>\[/code\]After doing this a button will appear holding text that the image has. it works nice.But then if text is a variable I can not do that, I would have to make a different image for different texts... That is not good.I would like to generate a input button passing the text of button as attribute and have the same effect, I have two issues:[*]How to generate correct color and get inmediatly to other color when hover.(Do you know any good generator) my base color is \[code\]#7d7d7d\[/code\] and final \[code\]#272727\[/code\][*]how to avoid a strange effect in my button, when hover it is like animating or sliding and not doing it straight away, please take a look at my fiddlecould you please help me acomplish the last button (without that sliding effect, I mean change color inmediatly when hover) shown in this fiddle?