How to achieve a hover effect for an image button?

How can I get an image button with hover effect? I have two button images one is simple and the other one is for the hov开发者_JAVA技巧er?

You can easily do it in CSS.

input[type='button']:hover
{
    color: #00a;
    //or background-image: url("url");
}

You can do it easily with css by using a sprite image and moving the background image depending if its hovered or not.

css:

a { display:block; width: 80px; height: 40px; background: url(bgImage.png) top;
a:hover { background: url(bgImage.png) bottom; }

You have to combine your "simple" and "hover" image into a single image for this to work.