Skip Navigation | Groups

This site uses cookies- for more information see the Cookie Policy | Continue


Use text links with Interactive Button backgrounds

How to use blank Interactive Buttons as links

One way to use interactive buttons supplied with Expression Web or FrontPage is to use blank images as background images, swapped using CSS. The links themselves are plain text. The method described below does not use any javascript, and will function in all browsers that use CSS, and degrade gracefully in browsers that do not support images or CSS.

For this method, two images are required - one for the links, and one for the hovered state. A third image may be used to show the current page. The images are large, but the same images are used for every button.

Usable Images

Since the images form a background for plain text (as opposed to incorporating the text as part of the image) they have to be large enough for the largest link text, and also large enough to allow the text to enlarge when the user requires bigger writing.There are only a limited number of button images that allow this, and still have a reasonable appearance at all text sizes. These are (showing one image from each type):

Group 1

Arrow Arrow
Block Block
Braidv Braid V
Circle Circle
Jewel Jewel

In addition, the Chain Column could be used (as above-left) but the chain links may move apart when text is resized.

Group 2

Embossed Tab Embossed
Glass Tab Glass
Glow Tab Glow
Metal Tab Metal
Soft Tab Soft

Notice that all these images share one important property - The images have at most three defined edges - some (in Group 1) have only one "edge" (such as Arrow), and the tab images (Group 2) have top and sides defined, the bottom can be sliced off as required. The images in Group 1 (left edge defined, no top, right or bottom) are more suited to (but not limited to) vertical navigation bars, the Tabs in Group 2 for horizontal bars.

The next page discusses creating the images in more detail.