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

Question

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>

Answer 1

perhaps something like

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

also,

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

is an alternative

Answer 2

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>

Answer 3

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

Answer 4

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.

Answer 5

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