Submit Button Image

Question

I want to use a Submit Button Image instead of the standard Button  I searched on Google and SO and got a few different ways    Which is the right way of using an Image as a Submit Button    Also i would want to add three states for the button - normal  hover  onclick  What i tried  HTML   lt input type  submit  value  Subscribe  gt    CSS  input type submit        background url    images btn-subscribe gif  none      text-indent -9999px      width 109px      height 41px      What shows up    What it should Display

User · Answer

It s very important for accessibility reasons that you always specify value of the submit even if you are hiding this text  or if you use  lt input type  image       gt  to always specify alt    attribute for this input field   Blind people don t know what button will do if it doesn t contain meaningful alt    or value

User · Answer

Edited   I think you are trying to do as done in this DEMO  There are three states of a button  normal  hover and active  You need to use CSS Image Sprites for the button states   See The Mystery of CSS Sprites    x000D   x000D    CSS   x000D   x000D   imgClass    x000D  background-image  url http   inspectelement com wp-content themes inspectelementv2 style images button png   x000D  background-position   0px 0px  x000D  background-repeat  no-repeat  x000D  width  186px  x000D  height  53px  x000D  border  0px  x000D  background-color  none  x000D  cursor  pointer  x000D  outline  0  x000D    x000D   imgClass hover   x000D    background-position   0px -52px  x000D    x000D   x000D   imgClass active  x000D    background-position   0px -104px  x000D    x000D   lt  -- HTML -- gt  x000D   lt input type  submit  value    class  imgClass    gt  x000D   x000D   x000D

User · Answer

lt INPUT TYPE  image  SRC  images submit gif  HEIGHT  30  WIDTH  173  BORDER  0  ALT  Submit Form  gt  Where the standard submit button has TYPE  submit   we now have TYPE  image   The image type is by default a form submitting button  More simple

User · Answer

You have to remove the borders and add a background image on the input     imgClass        background-image  url path to image  no-repeat      width  186px      height  53px      border  none      It should be good now  normally

User · Answer

lt input type  image  src  path to image  name  submit    gt    UPDATE   For button states  you can use type  submit  and then add a class to it   lt input type  submit  name  submit  class  states    gt    Then in css  use background images for    states  background-image url path to url   height      width          states hover  background-position          states active  background-position

[html] Submit Button Image

Examples related to html

Examples related to css

Examples related to submit