WebDwarf Tutorials banner
WebDwarf logo
Buttons

This tutorial will take you through simple buttons to more complicated buttons. We assume that you have done a number of the other tutorials -- there are links to them here if you haven't. In this tutorial we cover:

Text object
Transparent rectangle carrying link
Gradient fill
Title objects
External images
Shadows


Text object

The simplest possible button is a text object with a link
made in the Text Editor. Like this (see left):

OK, it doesn't look much like a button yet. But let's make it bold font and center it. Then in the Quick Editor, give it a 1-pixel Outline and change the Shading (background color).

Make the the link from the Quick Editor > Links tab. Control the color of the text from within the Text Editor -- we used white here. In IE8, there is no link underlining, but there is in Firefox. If you wanted more reliable underlining, you could do it from within the Text Editor by simply underlining the text.

By making the links inside the Text Editor, you can individually change the link underline and color. Here the link color is white with no underline.

One disadvantage of these links is that, depending on the browser, the link applies only to the actual text itself. This is an issue if you have only a small amount of text on a large button. You can avoid this by padding the text front and back with spaces, so giving a greater active area. But this approach is a little awkward, not to mention crude!



Transparent rectangle carrying link

To avoid this and the underline problem, you can make a transparent .gif image and instead of putting the link on the text, put it on the transparent image. If your buttons are all the same size, your images can all be copies of the first, each one with a different link.

To make such an image, it must be gif format.  See also: Adding transparency to an image.
Text Editor button
Home
Home
Home
Here is a transparent gif image still with a border, so you can see where it is. In practice, you would have no border. It has a link which is perfectly functional -- try it if you want. Make the gif (transparent rectangle) a little bigger than the button -- then precise alignment is not so important.

Now place the gif on top of the button. You may need to adjust the z-order. This button shows the transparent rectangle still showing the border.

The next button is a permanent group consisting of:
You may need to adjust the z-order so that the gif is on top of the button, not under. This next example has the link under the button and again depending on browser, may not work in preview, unless you click right on the protruding edge of the gif (which again shows a border).

If you are happy with this overall look, then you have your basic button design, and it's a very economical one. You have the full range of colors available -- so long as they are flat. You have a wide choice of font sizes. But only a restricted range of fonts -- you should use only fonts that are likely to be available on your visitor's computer. See Web safe fonts.

Home
Home
Home
Home
Gradient fill
Below is a larger style of button. This one is made with a rectangle using gradient fill and a text object superimposed. The two parts are rendered as a group into one composite image. As WebDwarf creates an image file for this button, we can place the link on the group object (the image), and have the hot spot for the link cover the whole button.
Title objects

Recall from the Titles tutorial, that title objects create images. You can place links on images. In contrast to text objects, you can't set a background shade for a title -- however you can set a shade in a rectangle behind the title. So let's do that first.

This one is made with a cylindrical gradient fill
.

Now make the title itself. This time use the Title Editor -- make it again in bold white. Uncheck Anti-Alias -- smaller fonts are quite acceptable without it. This image shows the white title placed on top of the background button.

Now turn the two objects into a permanent group, and on the group object, set re-render on. The creates a composite image, the sum of the two parts.

Finally place the link on the composite image.

The advantage of using titles like this are:
The disadvantage is that it produces a larger image file -- the one here is about 1K. Contrast with the text buttons where the image takes no bytes at all, and there is only a small overhead for the possible shared transparent rectangle.

Title Editor button
Rounded rectangle
Rounded rectangle
Home
Home
Home
External images
The titles used above are images. You can just as easily use images created in an image editor, or something from the Web. Import the images via the Mona Lisa button, or just drag and drop onto your page. The only extra step is to add the link as you did for the title.

Image Editor button
Shadows
A button needs a shadow (sometimes!) and here are two ways to do it -- by placing grey borderless rectangles under the button:
First are the rectangles by themselves then immediately following are the same rectangles placed under a button.
Shadow rectangle
Home
Home
Shadow example
Shadow example
Home
< Tutorials Home
Virtual Mechanics Logo
WebDwarf
®

Tutorials