Clever Geek Handbook

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

I want to use nice 3d buttons on my website. However, the way it currently works is that the text is part of the image.

So, when I want to change the text (or create a new button), it takes 10 minutes of editing instead of 20 seconds of changing the text.

I've seen several sites that have a blank button with text.

The real trick is making the whole image clickable. I was able to make the link inside the image visible, but the interface is bad. Users expect a button to be clicked anywhere, and not being able to behave in this way will break them.

They seem to wrap the .DIV tag with a background image around the hyperlink.

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

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

Does anyone have an understanding or explanation of how this works?

SAMPLE CODE

<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>
+1


source to share


5 answers


Make a background image button:



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


source


maybe something like

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

also,



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

is an alternative

0


source


Will your anchor: block and give it a height / width equal to your Div / background image?

0


source


In your example, just put the CSS styles in the tag ...

From there:

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>

Please note that they are using JS for some reason and not using 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 how the site you linked to did it.

0


source


I found this one pretty impressive. Using GWT to Create Hyperlinks.

0


source






More articles:


All Articles