Cool button tricks

      By using tables you can create "graphical" buttons with no images needed.
This speeds up the loading time of your page and makes it easy to change
the size and color of the buttons.

      You can also use tables to overlay text on a graphic, so all the buttons
on your site can use the same graphic file and you don't have to make seperate
graphics for each link. This also makes the page load faster since only one image
has to be downloaded.
Refresh this frame and see how fast it loads.
(The rest of the page is written by a cgi script, so it won't be as fast. Right click here to refreh just this frame.)

These two buttons use no graphics, they are just tables.

Table 1

Table 2

These four buttons all use the exact same image as the background.
The text is overlayed on the image using a table.

Silver 1

Silver 2

Adding the border attribute to the table tag adds these nice borders.

Edge 1

Edge 2

      Look at the HTML source code of this page to see how to do these tricks.

You can get blank buttons to use for this at Button World .
They have dozens of free buttons you can use on your site.

For more button making resources, see our misc. page.