Stylesheet Button Links

Do you want to use buttons for site navigation? That's an awful lot of buttons. If you need say twenty buttons and you create each one as a separate graphic and each is 5k in size then the buttons alone will take up 100k making your web page very user unfriendly to the vast majority of potential visitors who still use 56k modems.

If you only need one or two buttons on your page then you don't have such a problem but you may still want to consider the alternatives.

If you were to create one button and use that as the background of a single cell table with the button text forming the cell content and defined as a text link then you can reduce the number of images required to one at the expense of needing somewhat more code in your page to define each button as a table. This is one solution to the problem that will work with all browser versions that handle tables with image backgrounds - which should be just about all browsers used today that support images. I will leave it to you if you want to implement that solution because by using stylesheets we can do even better.

A Stylesheet Button

The following button uses an image file of only 83 bytes and a stylesheet declaration of 371 bytes. Each button only requires 34 extra characters to be coded for each link as compared to a normal text link. If our page needs 20 buttons then the extra that needs to be downloaded as compared to text links is a mere 1134 bytes (which is even shorter than the code to link to the images would be since a properly coded image tag is usually at least 50 characters long making 20 image tags something over 2000 bytes - and we don't need the 100k of images either). The buttons we create using this method will vary in appearance depending on which browser we use but have the added advantage that their appearance changes very little if you get a visitor who has turned images off in their browser.

In the browser that you are using the button that I am about to show you how to create looks like this:

I can't use the code to show you what the button looks like in other browsers so I have captured some screen images from the various browser displays to show you what to expect from the various browsers. Look at the buttons on your screen and see if you can tell the difference between the stylesheet generated button above and the graphic of the button for your browser below. Of course since the generated button has the image in the background it may appear slightly different on a printed copy depending on the configuration of your print settings.

image of button in IE 6The button displays best in Internet Explorer 5.5+ and Opera 7. Netscape 6+, Opera 6, and Mozilla display similarly but ignore the width attribute within the stylesheet declaration so the width of the button will adjust to fit the width of the text rather than maintaining a constant width like it does in IE and Opera. You might consider making the buttons closer to the same width using non-breaking spaces ( ) either side of the shorter text strings if having the button widths vary too much in width bothers you.
image of button in Opera 5In IE5 and Opera 5, the background graphic doesn't display so you get a plain button that doesn't display the ripple effect. Opera also ignores the width attribute so the button width adjusts to match the text content. The size of the button differs slightly between versions of Opera but appears reasonable in each.
image of button in Netscape 4Finally, Netscape 4 doesn't display the nice bevelled edge on the button instead displaying a plain coloured rectangle slightly away from the button face which means that it doesn't really look much like a button but it still doesn't look too bad (at least I think that its acceptable given the small percentage of visitors who will be using that browser). There is one other problem with the Netscape 4 version of these buttons and that is that the browser forces a line break before and after each so that you can't place anything else alongside your button without using a table. Where you have a horizontal row of buttons in all the other browsers you will get a vertical column of buttons in Netscape 4.

The Stylesheet Code

So what is the code that gives us this nice looking (at least I think so) button? More importantly, how do we add text to the button and make the button into a link?

Well let's start with the stylesheet code which reads as follows:,,, { color:#ffff00;font-weight:normal;
font-family:"Comic Sans MS", cursive;font-size:14pt;background-color:#cc9999; } { width:130px;text-align:center;padding:5px 10px;
border-color:#ffcccc #993333 #993333 #ffcccc;background-image:url(img/button.gif); }

The first two lines of this code actually define a text size, colour, and font to use in all cases with links. In this case we are defining a cursive font at 14 point in yellow with a plain background that is the same colour as the base colour for our buttons. You can omit the background-color attribute if you like, I have only included it to override the yellow background that this site normally uses for active and hover links. The declaration defines these attributes are to be applied to any link that belongs to class bt.

The remaining three lines specify attributes for a span statement that will create the button effect. We assign the button width (ignored except in IE and Netscape 4); centre align any text in the button; supply padding so that the text doesn't overflow out of the button; define the background colour (that Opera and any browsers with images turned off will use); define the border style, width, and colour (that will create the bevel effect on all browsers except Netscape 4); and finally a background image to apply some texture to the button where the browser will allow its use. We will use the <span class="bt"> and <a class="bt"> together to create our buttons complete with text link (the above button was created using only the span tag around a transparent graphic - used to give the button some size).

The background graphic in this case is only six pixels square with all but three of the pixels being the same colour as the background colour. I used the two colours from the edge of the button (which are slightly lighter and darker versions of the same colour) to randomly change three pixels and thus produce a pattern effect when this graphic is tiled across our button. If a plain button meets your needs you can drop this graphic and the background-image attribute and save yourself 120 bytes.

Want a different colour button? You can easily change all of the colour references in the stylesheet to colours of your choice. You will want to key the same relationship between the background-colour and the border-colors in order to maintain the bevel edge effect and will need to create a background image in colours to match.

So that's the stylesheet definition which can be included in our page inside of <style> tags or referenced externally using a <link> tag.

Using the Button as a Link

So now all we need to do is to look at how we use these stylesheet attributes to create the buttons within our page. This is where it gets really simple. All that all that we need to do is to start each link with <span class="bt"><a class="bt"> instead of <a> and end it with </a></span> instead of </a>. and we get buttons instead of plain text links. Note that for this to work properly any line breaks in your code must occur within tags and not between them.

So let's see how these buttons work. The following is a selection of actual working buttons built using the stylesheet definition shown above and which - when you click on their text - will function exactly the same as the corresponding links at the top of this page.

Home Site Map Back

Print Ask Felgall

The code used in the page to produce these buttons (with the additional code required to make them buttons rather than text links in bold) is:

 <p class="centre">
<span class="bt"><a class="bt" href="index.html">Home</a></span>
<span class="bt"><a class="bt" href="site.htm">Site Map</a></span>
<span class="bt"><a class="bt" href="#" onclick="history.go(-1);return false;">Back</a></span></p>
<p class="centre">
<span class="bt"><a class="bt" href="#" onclick="window.print();return false;">Print</a></span>
<span class="bt"><a class="bt" href="ask.htm">Ask Felgall</a></span></p>

Browser Compatibility Considerations

You might be wondering why I have split the code between the <a> and <span> tags rather than puting everything on the <a> tag. You might also think you see some way of recoding the stylesheet code to make it shorter. I actually tried lots of more abbreviated versions of this code before setting on this variation as providing the greatest consistency across the different browsers. Unfortunately CSS is a relatively recent addition to web page design and just about every browser that I tried produced slightly different results. Whenever I tried to restructure the stylesheet definition to reduce the coding required below what I have here the resultant display on one or other of the browsers I was testing on stuffed up. For example, if you place all of the attributes on the <a> tag and drop the <span> tag completely then the various versions of Opera will make the button smaller than the text that is supposed to be contained within it.

One final point. If you are going to include a number of these buttons in your page then don't include so many across one line that they wrap onto the next line (and remember that 10% of visitors still use 640x480 resolution). Some of the browsers have problems with wrapping a button from one line to the next and most don't move down far enough when starting the next row of buttons. This type of button is best used vertically (which is how they will display in Netscape 4 anyway). If you do decide to use them next to one another just include two or three within each paragraph. By using paragraphs we ensure that enough vertical distance is included between each row to ensure that they don't overlap. To ensure that the buttons display horizontally in all browsers including Netscape 4 you will need to include them in a table. Alternatively you might like to experiment with using CSS positioning to place your buttons.

I have recently been asked why the tags are in the order <span><a> instead of the other way around as with the way that I have them only the text is clickable as a link. With them the other way around the entire button becomes clickable as a link in most browsers. The problem is Netscape 4. With the tags the other way around You completely lose the link function in Netscape 4. The code works perfectly with the span tag inside the link tag in Netscape 6+ and Opera 5+. It also works in Internet Explorer except that the cursor doesn't change properly. You can fix this in the css code by adding cursor:pointer; to the css for the <a> tag but of course it still doesn't work in Netscape 4. To have the link work in Netscape 4 as well as in the more recent versions of Netscape, Opera, and Internet Explorer the link tag must be inside the span tag.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow