Jointed Free Web Interface Buttons

These web interface buttons provide an interesting effect when used in HTML embedded inside tables if you set the table cellspacing to "1" with a contrasting color behind it in the background table cell. This makes it look like there is a thin defining line around your buttons in popular browsers. I used black in the HTML background table so there appears to be a joint between these buttons in the interface. This could be done using CSS border as well.

Jointed, no emphasis
First, here are 2 interface buttons joined without an emphasized joint separation.



More emphasis on the separation
Below is the jointed appearance using an embedded table and cell space method. Basically you start with one table with two cells. Set cell spacing to "1" and then place a button image inside each of these cells. Then you embed this table inside a completely new table and set the new table color to black #000000, or any color you want the joint separations to be.



Here is the CSS method. Below I used CSS border:1px solid to make the jointed separation lines appear.

img.thinline {
margin: 0px 0px 0px 0px;
border:1px solid;
border-color: #000000;
} 

Below are the blank buttons I started with. I found these easy to use for several projects. Simply use something like Photoshop to place your text on top. Created by: Hitguru
License: No redistribution. Free for personal or commercial use.
Details: Zip File / .gif
Download: Jointed Free Web Interface Buttons