How do I change the image of a HTML button on mouse over etc

How do you point to various images 开发者_运维知识库for various button states? Onmouseover, 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: The :focus and :hover pseudo classes are not supported on all IE versions (on buttons at least). You can use JavaScript to emulate. Check out the events blur() and focus() (to emulate :focus) and onmouseover() and onmouseout() (to emulate :hover).

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