Input [type =“ button”]精灵悬浮在过渡问题上

Question

I would like to know, how you can add a transition when I hover my button. I have made it as a sprite. with two separate images I can make the transition... Is there a good way to make this happen so I save a server request using a sprite.

.udfyld_data input[type="button"] { 
    background:url(../../images/kurv/til-betaling-knap.png) no-repeat; 
    width:192px; 
    height:37px;
    border:0;  
    cursor:pointer;
}

.udfyld_data input[type="button"]:hover { 
    background-position: 0 -37px;
    display:block;
}

Answer 1

Add css3 transition property

transition: [duration] [property] [timing-function]

So your code will be like this:

.udfyld_data input[type="button"] { 
    .....
    transition: 1s background linear;
    /*For browser compatibility*/
    -moz-transition: 1s background linear;
    -webkit-transition: 1s background linear;
}

UPDATED

Use div instead of input button

HTML : <div class="button"><span></span></div>

I added a span for some hack

Check this DEMO