How to put a jpg or png image into a button in HTML

Question

I want a button with an image in it   I am using this     lt input type  submit  name  submit  src  images stack png    gt     But it does not show the image   I want the whole button to be the image

User · Answer

Use  lt button gt  element instead of  lt input type button   gt

User · Answer

You can style the button using CSS or use an image-input  Additionally you might use the button element which supports inline content    lt button type  submit  gt  lt img src   path to image  alt  Submit  gt  lt  button gt

User · Answer

you can also try something like this as well   lt input type  button  value  text  name  text  onClick   action   return false  class  fwm button  gt    and CSS class    fwm button      color  white     font-weight  bold     background-color   6699cc     border  2px outset     border-top-color   aaccff     border-left-color   aaccff     border-right-color   003366     border-bottom-color   003366       An example is given here

User · Answer

lt a href     gt           lt img src  p png  gt  lt  img gt       lt  a gt

User · Answer

You can use some inline CSS like this   lt input type  submit  name  submit  style  background  url images stack png   width 100px  height 25px     gt    Should do the magic  also you may wanna do a border none  to get rid of the standard borders

User · Answer

This may work for you  try it and see if it works    lt input type  image  src   library graphics cecb2 gif  gt

User · Answer

lt input type   image  id     onclick     src       gt    it works

User · Answer

It should be   lt input type  image  id  myimage  src           gt    So  image  instead of  submit   It will still be a button which submits on click   If your image is bigger than the button which is shown  let s say the image is 200x200 pixels  add this to your stylesheet    myimage       height  200px      width  200px      or directly in the button tag    lt input type  image  id  myimage  style  height 200px width 200px   src           gt    Note however that resizing the image like this might not yield ideal results  if e g  your image is much smaller than you want it to be shown  you will see the single pixels  if on the other hand it is much bigger  you are wasting precious bandwidth of your users  So resizing the picture itself to the actual size is preferrable over rescaling via stylesheets

[javascript] How to put a jpg or png image into a button in HTML

Examples related to javascript

Examples related to html