Buttons
This tutorial will take you through simple buttons to more complicated buttons that involve mouse over effects -- also called rollovers. 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 and rounded corners
Table objects
Title objects
External images
Mouse over effects
Mouse over with PNG 32
Shadows
Sources of buttons
Form object
Forms have simple buttons available -- see Introduction to Forms: Button.
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).
You may not like the underline that shows up both on the workpage and in preview, so turn it off in the Page Editor > Links, Fonts tab. We haven't done that here because it has undesirable side effects. But if you try it you will see the downside -- it turns the underlining off on all text links, including the ones in this text.
You might try to avoid this by instead making the the link from the Quick Editor > Links tab. As before, control the color of the text from within the Text Editor -- we used white here. Notice that, depending on browser, there is no link underlining. If you wanted 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 or png8 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 clones, each one with a different link.
To make such an image, it must be either .gif or .png8 format, and for png8, you must turn Render Background off in the Geometry Editor > Options tab. See also: Adding transparency to an image.
Here is a transparent png8 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 -- preview and try it if you want. Make the png8 (transparent rectangle) a little bigger than the button -- then precise alignment is not so important.
Now place the png8 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:
- text object
- transparent rectangle on top (no border this time).
To avoid creating an image file for the group, make the following settings:
- Geometry Editor > Options tab > Set Render Background off
- Quick Editor > Object tab > Set Anti-Alias off and Re-Render off.
You may need to adjust the z-order so that the png8 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 png8 (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.
Gradient fill and rounded corners
Below is a larger style of button. This one is made with a rectangle using gradient fill, rounded corners and a text object superimposed. The two parts are rendered as a group into one composite image. Because of the gradient fill, SiteSpinner creates an image file for this button. We can then place the link on the group object (the image), and have the hot spot for the link cover the whole button.
Table objects
You might use a table for buttons if you liked the border effects you can make with a table, and the economy -- such buttons require very little code. There is an example just below. Make the links inside the text objects as below, setting underline off. Apart from the table, the buttons are exactly the same as the Text object buttons. More in Tables for Navigation.
Title objects
Recall from the Title 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 with the corners rounded off -- see Rounding corners off.
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 link is on the whole button
- You can use any font you want, not just web-safe ones
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.
You are not limited to rectangular buttons either -- the examples below left show what you can do with curved shapes for your buttons. Where the curves are close to other objects, text in particular, it is a good idea to set Render Background off -- Geometry Editor > Options tab.
Notice in preview that the active area of the link in curves extends considerably beyond the object in some directions. In workpage view this is more obvious -- the bounding box is bigger than you might expect, because it has to accommodate the drag handles for the shape object. If this proves to be a problem, you could re-use the idea of the transparent rectangle we introduced for text-based buttons.
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.
Mouse over effects
First you should have read the Special Effects tutorial because what we will do here depends at least a little on that.
We'll consider only text buttons, but the same principles apply to other button types too.
A mouse over effect depends on having two similar images, but one a little different to the other. When you mouse over the top button of a pair of images, that one disappears, revealing the bottom button. The bottom button image is the one that carries the link.
Lets start with a copy of an earlier text button, (left) then set the background to a paler blue (under).
The paleface will be the bottom button and will carry the link, so place the link on that one. (From inside the Text Editor.) Darkface does not need the link.
We want the top button to disappear on mouse over, so let's add that effect -- Special FX > Mouse Over > Hide on Mouse Over.
Preview to make sure the link works and the mouse over works.
Finally, stack the two buttons on top of each other. Paleface goes under darkface, so you may need to adjust the z-order to achieve this. You may wish to make the two buttons a permanent group as in the finished example example to the left.
Mouse over with PNG 32
Because the PNG 32 image format supports alpha-channel transparency, if you use a PNG 32 transparent layer, you need only one button. The layer can be semi-transparent, and duplicates the effect of another button image. You can use the same transparency in many places -- it can be the same image file for each button you use it with.
Start with a base button and put your link on it.
Instead of the other button, make a shaded PNG 32 transparency of the correct size. Make this transparency invisible when you mouse over it. See Mouse over effects.
Move the transparency on top of the 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.
Sources of buttons
In the ClipArt folder and, in .ims file format, are some buttons templates, which have a variety of buttons. Well worth a look if you are seeking some inspiration.
Also, the templates that ship with SiteSpinner have other button variations -- these are available from the main menu File > Open Template ... Notice that you can preview mini-pages of any template (or project for that matter) by clicking the arrow buttons under the preview panel to the right of the Open as Template window.
And of course there is the Web itself, but you have probably thought of that already!
See also:
Copying and tweaking buttons
Drop-down menus
