Is it possible to put text on 3d button in HTML ?

I want to use pretty 3d button images on my website. However, currently the way this works is the text is part of the image.

So, when I want to change the text (or make a new button) it's a 10 minute editing chore instead of a 20 second text change.

I've seen a few websites that have a blank button with text on it.

The real trick is making the entire image clickable. I've been able to make the link inside an image visible but that's a poor UI. Users will expect to click the button anywhere and failure to behave that way will frustrate them.

It seems like they're wrapping a .DIV tag with an image background around a Hyperlink.

<Div  (class w/ image>
<a>  text
</a>

EXAMPLE: https://www.box.net/signup/g

Anyone have any insight or explanation of how this works?'

CODE SAMPLE

<a href="#" class="button" style="position: relative;left:-5px;" 
   onmousedown="return false;" 
   onclick="document.forms['register_form'].submit(); return false;">
    <span>
        My text
    </span>
</a>

From stackoverflow

• perhaps something like

  a { 
     width: something ; 
     height: something; 
     display: block; 
     background: url('hi.png'); 
   }
  

  also,

  input { background: url('hi.png'); }
  

  is an alternative

• Make the button a background image:

  <style>
  div.button a {
      display: block;
      width: /* image width */;
      line-height: /* image height */;
      text-align: center;
      background: url(/* image uri */) no-repeat;
  }
  </style>
  

• Would setting your anchor to display:block and giving it a height/width equal to your div/background image help you?

• Your example is just placing CSS styles on the a tag...

  From there:

  The tag:

  <a onclick="document.forms['register_form'].submit(); return false;"
     onmousedown="return false;" style="position: relative; left: -5px;"
     class="button" href="#">
      <span>Continue</span>
  </a>
  

  Note that they are using JS for some reason, and not using the href, I don't like that.

  Then, the button class:

  a.button 
  {
      background:transparent url(../img/greenbutton2.gif) no-repeat scroll left top;
      font-size:16px;
      height:42px;
      line-height:42px;
      width:155px;
  }
  

  This is just how that site you linked to did it.

• I found this rather impressing. Using GWT to style hyperlinks.