How to change an input button image using CSS

Question

So  I can create an input button with an image using   lt INPUT type  image  src   images Btn PNG  value    gt    But  I can t get the same behavior using CSS  For instance  I ve tried   lt INPUT type  image  class  myButton  value    gt    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

User · Answer

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;
}

User · Answer

HTML   lt div class  myButton  gt  lt INPUT type  submit  name    value    gt  lt  div gt    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

User · Answer

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;
}

User · Answer

Let s assume you can t change the input type  or even the src  You ONLY have css to play with   If you know the height you want  and you have the url of a background image you want to use instead  you re in luck   Set the height to zero and padding-top to the height you want  That ll shove the original image out of sight  giving you a perfectly clean space to show your css background-image   Works in Chrome  No idea if it works in IE  Barely anything clever does  so probably not    x000D   x000D   daft   x000D    height  0  x000D    padding-top  100px  x000D    width  100px  x000D    background-image  url clever jpg   x000D    x000D   lt input type  image  src  daft jpg  id  daft  gt  x000D   x000D   x000D

User · Answer

You can use blank gif  1px transparent image  as target in your tag    lt input type  image  src  img blank gif  class  button  gt     and then style background in css    button  border 0 background transparent url     img button png   no-repeat 0 0    button hover  background transparent url     img button-hover png   no-repeat 0 0

User · Answer

Here is what worked for me on Internet Explorer  a slight modification to the solution by Philoye    gt  divbutton       position relative      top -64px      left 210px      background  transparent url        images login go png   no-repeat      line-height 3000      width 33px      height 32px      border none      cursor pointer

User · Answer

A variation on the previous answers  I found that opacity needs to be set  of course this will work in IE6 and on  There was a problem with the line-height solution in IE8 where the button would not respond  And with this you get a hand cursor as well    lt div id  myButton  gt     lt input id  myInputButton  type  submit  name    value    gt   lt  div gt    myButton    background  url  form send button gif   no-repeat   width  62px   height  24px       myInputButton     background  url  form send button gif   no-repeat   opacity  0   -ms-filter  progid DXImageTransform Microsoft Alpha Opacity 0     filter  alpha opacity 0    width  67px   height  26px   cursor  pointer   cursor  hand

User · Answer

You can use the  lt button gt  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    lt button type  submit  style  border  0  background  transparent  gt       lt img src   images Btn PNG  width  90  height  50  alt  submit    gt   lt  button gt    More info  http   htmldog com reference htmltags button

User · Answer

Here s a simpler solution but with no extra surrounding div    lt input type  submit  value  Submit  gt    The CSS uses a basic image replacement technique  For bonus points  it shows using an image sprite    lt style gt      input type  submit             border  0          background  url  sprite png   no-repeat -40px left          text-indent  -9999em          line-height 3000          width  50px          height  20px         lt  style gt    Source  http   work arounds org issue 21 using-css-sprites-with-input-type-submit-buttons

User · Answer

I think the following is the best solution   css    edit-button       background-image  url edit png       background-size  100       background-repeat no-repeat      width  24px      height  24px      html    lt input class  edit-button  type  image  src  transparent png    gt

User · Answer

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;
}

User · Answer

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

User · Answer

Here s a simpler solution but with no extra surrounding div    lt input type  submit  value  Submit  gt    The CSS uses a basic image replacement technique  For bonus points  it shows using an image sprite    lt style gt      input type  submit             border  0          background  url  sprite png   no-repeat -40px left          text-indent  -9999em          line-height 3000          width  50px          height  20px         lt  style gt    Source  http   work arounds org issue 21 using-css-sprites-with-input-type-submit-buttons

User · Answer

You can use blank gif  1px transparent image  as target in your tag    lt input type  image  src  img blank gif  class  button  gt     and then style background in css    button  border 0 background transparent url     img button png   no-repeat 0 0    button hover  background transparent url     img button-hover png   no-repeat 0 0

User · Answer

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;
}

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

HTML   lt div class  myButton  gt  lt INPUT type  submit  name    value    gt  lt  div gt    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

User · Answer

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

User · Answer

I think the following is the best solution   css    edit-button       background-image  url edit png       background-size  100       background-repeat no-repeat      width  24px      height  24px      html    lt input class  edit-button  type  image  src  transparent png    gt

User · Answer

A variation on the previous answers  I found that opacity needs to be set  of course this will work in IE6 and on  There was a problem with the line-height solution in IE8 where the button would not respond  And with this you get a hand cursor as well    lt div id  myButton  gt     lt input id  myInputButton  type  submit  name    value    gt   lt  div gt    myButton    background  url  form send button gif   no-repeat   width  62px   height  24px       myInputButton     background  url  form send button gif   no-repeat   opacity  0   -ms-filter  progid DXImageTransform Microsoft Alpha Opacity 0     filter  alpha opacity 0    width  67px   height  26px   cursor  pointer   cursor  hand

User · Answer

Let s assume you can t change the input type  or even the src  You ONLY have css to play with   If you know the height you want  and you have the url of a background image you want to use instead  you re in luck   Set the height to zero and padding-top to the height you want  That ll shove the original image out of sight  giving you a perfectly clean space to show your css background-image   Works in Chrome  No idea if it works in IE  Barely anything clever does  so probably not    x000D   x000D   daft   x000D    height  0  x000D    padding-top  100px  x000D    width  100px  x000D    background-image  url clever jpg   x000D    x000D   lt input type  image  src  daft jpg  id  daft  gt  x000D   x000D   x000D

User · Answer

You can use the  lt button gt  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    lt button type  submit  style  border  0  background  transparent  gt       lt img src   images Btn PNG  width  90  height  50  alt  submit    gt   lt  button gt    More info  http   htmldog com reference htmltags button

User · Answer

My solution without js and without images is this    HTML    lt input type Submit class continue shopping 2  name Register title  Confirm Your Data    value  confirm your data  gt     CSS    continue shopping 2 hover  background-color  FF9933  text-decoration none  color  FFFFFF      continue shopping 2  padding 0 0 3px 0  cursor pointer  background-color  EC5500  display block  text-align center  margin-top 8px  width 174px  height 21px  border-radius 5px  border-width 1px  border-style solid  border-color  919191  font-family Verdana  font-size 13px  font-style normal  line-height normal  font-weight bold  color  FFFFFF

User · Answer

My solution without js and without images is this    HTML    lt input type Submit class continue shopping 2  name Register title  Confirm Your Data    value  confirm your data  gt     CSS    continue shopping 2 hover  background-color  FF9933  text-decoration none  color  FFFFFF      continue shopping 2  padding 0 0 3px 0  cursor pointer  background-color  EC5500  display block  text-align center  margin-top 8px  width 174px  height 21px  border-radius 5px  border-width 1px  border-style solid  border-color  919191  font-family Verdana  font-size 13px  font-style normal  line-height normal  font-weight bold  color  FFFFFF

User · Answer

You can use the  lt button gt  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    lt button type  submit  style  border  0  background  transparent  gt       lt img src   images Btn PNG  width  90  height  50  alt  submit    gt   lt  button gt    More info  http   htmldog com reference htmltags button

User · Answer

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

User · Answer

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

User · Answer

You can use the  lt button gt  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    lt button type  submit  style  border  0  background  transparent  gt       lt img src   images Btn PNG  width  90  height  50  alt  submit    gt   lt  button gt    More info  http   htmldog com reference htmltags button

User · Answer

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

User · Answer

Here is what worked for me on Internet Explorer  a slight modification to the solution by Philoye    gt  divbutton       position relative      top -64px      left 210px      background  transparent url        images login go png   no-repeat      line-height 3000      width 33px      height 32px      border none      cursor pointer

[css] How to change an input button image using CSS?

Examples related to css

Examples related to input-button-image