Question

I have a html button, and i have added a background image to it that has the a word “SUBMIT” the problem is that on top of the image there is a “Submit” that i cant get rid off.

Here is my code

     <input type="submit" value="Submit" class="button" />

      .button{
      background: white url('../images/mybtn.png') no-repeat top;
      width: 150px;
      height: 30px;
}

How can i get rid of the default “Submit” on the button?

Thank you

Answer 1

write text-indent:-9999px in your button like this:

.button{
      background: white url('../images/mybtn.png') no-repeat top;
      width: 150px;
      height: 30px;
      text-indent:-9999px;
      overflow:hidden;
}