How to change HTML button image on mouse etc.

Html

<button>Hello</button>

      

        
        
        
      

    

CSS

button {
    background: url(your-image.png) no-repeat;
}

button:hover {
    background: url(your-image-hovered.png) no-repeat;
}

button:focus {
    background: url(your-image-focused.png) no-repeat;
}

      

        
        
        
      

    

Note . Pseudo-classes :focus

and are :hover

not supported in all versions of IE (at least on buttons). You can use JavaScript to emulate. Check the events blur()

and focus()

(for emulation :focus

) and onmouseover()

and onmouseout()

(for emulation :hover

).

Alternatively, if you need to support a very ancient browser (which is unlikely), you can use JavaScript, but it is not recommended in this day and age when CSS provides this functionality.