How to change input button image using CSS?

Question

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.

Thanks

Answer 1

If you're wanting to style the button using CSS, make it a type="submit" button instead of type="image". type="image" expects a SRC, which you can't set in CSS.

Note that Safari won't let you style any button in the manner you're looking for. If you need Safari support, you'll need to place an image and have an onclick function that submits the form.

Answer 2

This article about CSS image replacement for submit buttons could help.

"Using this method you'll get a clickable image when style sheets are active, and a standard button when style sheets are off. The trick is to apply the image replace methods to a button tag and use it as the submit button, instead of using input.

And since button borders are erased, it's also recommendable change the button cursor to the hand shaped one used for links, since this provides a visual tip to the users."

The CSS code:

#replacement-1 {
  width: 100px;
  height: 55px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent url(image.gif) no-repeat center top;
  text-indent: -1000em;
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
}

#replacement-2 {
  width: 100px;
  height: 55px;
  padding: 55px 0 0;
  margin: 0;
  border: 0;
  background: transparent url(image.gif) no-repeat center top;
  overflow: hidden;
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
}
form>#replacement-2 { /* For non-IE browsers*/
  height: 0px;
}

Answer 3

You can use the <button> tag. For a submit, simply add type="submit". Then use a background image when you want the button to appear as a graphic.

Like so:

<button type="submit" style="border: 0; background: transparent">
    <img src="/images/Btn.PNG" width="90" heght="50" alt="submit" />
</button>

http://htmldog.com/reference/htmltags/button/

Answer 4

Perhaps you could just import a .js file as well and have the image replacement there, in JavaScript.

Answer 5

HTML

<div class="myButton"><INPUT type="submit" name="" value=""></div>

CSS

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

This will work anywhere, even in Safari.

Answer 6

<div class="myButton"><INPUT type="submit" name="" value=""></div>

CSS

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

This will work anywhere, even in Safari.

It works , thx.

Answer 7

I was facing the same problem now it is fixed.