So, I can create an input button with an image using

<INPUT type="image" src="/images/Btn.PNG" value="">

But, I can’t get the same behavior using CSS. For instance, I’ve tried

<INPUT type="image" class="myButton" value="">

where “myButton” is defined in the CSS file as

.myButton {
    background:url(/images/Btn.PNG) no-repeat;
    cursor:pointer;
    width: 200px;
    height: 100px;
    border: none;
}

If that’s all I wanted to do, I could use the original style, but I want to change the button’s appearance on hover (using a myButton:hover class). I know the links are good, because I’ve been able to load them for a background image for other parts of the page (just as a check). I found examples on the web of how to do it using JavaScript, but I’m looking for a CSS solution.

I’m using Firefox 3.0.3 if that makes a difference.

12 Answers
12

Leave a Reply

Your email address will not be published. Required fields are marked *