Creating Web Page Buttons Online
Page content

Buttons with navigation code

Hoover Web Design has no fewer than four button design pages, moving from simple single images through to elaborate user-specified graphics for rollovers. Working through these is a good way or users to acquire a sense of the options that are available and the kind of code that will be required in order to display them.

Hoover 3D Buttons – these consist of a single downloadable button image in the user’s choice of colour and shape, with some JavaScript code which puts a text label on the image. The button is added to the web designer’s page via an tag which includes some CSS code and links to the location of the button file. The button image does not change, but the text moves slightly when the button is clicked. Very simple and straightforward.

Hoover Animated Buttons uses a variety of predefined animated GIF file backgrounds. The background file is downloaded rather than the button image, and again an tag with some CSS code is used to place the animation on the button behind the user’s selected text. A color reversal is applied to the button’s borders when the button is clicked, to give the impression that it is moving inwards.

Hoover Button and Pop Up Message Generator creates a button which responds to a mouseover by changing colour. When clicked it pops up a message box which the user must respond to before they are taken to the destination page. JavaScript is used here in addition to the .

Finally, the Hoover Rollover Buttons Maker allows the user to select or specify two similar images, one to represent the unpressed state of the button and the second to represent its pressed state. The resulting images are stored remotely on the Hoover site, but a user can substitute their own images and modify the code if they prefer.

Buttons as image files only

ButtonBoost gives users a huge range of free options for creating single button images, but only paid subscription holders can download automatically generated button sets with navigation scripts. Unbeatable for sheer power.

<strong>Buttonator</strong> is less powerful but more user-friendly: having chosen a design, users can download up to ten button images with that design, just by specifying the text to appear on each button. Subscribers also get access to rollover buttons and navigation scripts.

CoolArchive is less flexible still, but it has some funky designs.

<strong>CoolText</strong> has a wide range of fonts, though the number of shapes is limited and rendering is very slow.

GlassyButtons is a very simple but elegant page which produces a downloadable set of rollover buttons in a variety of file formats, along with a record of the user’s settings. Ambitious users can upload not only their own images, but also their own fonts to use on the buttons.

<strong>ButtonGenerator</strong> has a huge range of funky button styles, but not all are free to use. The output for non-subscribers is a single downloadable image file.

<strong>Makebutton.com</strong> is a simple but quick static image generator.

Almost as simple is <strong>The Free Web Stuff</strong>, although this does supply rollover images.

<strong>TomaWeb</strong> is simpler still, but it does give the option of having the button caption run vertically.

Flash button generators

Another approach to buttons is to use the Adobe Flash animation package to create ineractive graphic files which are then ’embedded’ into the web page. There are several websites which use this approach:

<strong>FlashButtons</strong> uses a different approach: the user enters a list of up to 30 button captions and the same number of hyperlink destinations, and specifies a Flash animated button style from a set of around 50. The site then generates a complete Flash-based navigation bar, along with the accompanying navigation text, which the user can download and add to their web pages.

FlashButtons%20-%20Step%201

<strong>FlashVortex</strong> has a limited range but some very attractive button designs. The resulting code can either be downloaded as a Flash file or run remotely off the FlashVortex site; but since the site is quite slow to respond this may not be an ideal solution.

Specialised buttons

DynamicDrive offers an online tool for creating images based on the familiar two-coloured RSS feed buttons, though the settings can be modified to produce other kinds as well. No code is available here – just a downloadable image file. There are many similar sites including <strong>BlogFlux</strong> and <strong>Ekstreme</strong>.

<strong>Advance Software</strong> has a page specifically for creating sets of eCommerce-linked buttons, although some of the captions such as ‘Edit’ and ‘Delete’ may be applicable elsewhere. Only one button of each type is created and no code is attached, but it supports several eCommerce packages.

DevDude is a neat tool for generating the tag CSS code to produce simple but attractive buttons.

In addition to all these, of course, there are many freeware and shareware programs for producing buttons, and some ‘buttonizing’ capability can be found in most good graphics programs. Among the specialised programs are <strong>Trellian Button Factory</strong>, <strong>3D Button Creator Gold</strong> and <strong>Antssoft Ultra Button</strong>. Most major bitmapped graphics programs such as Photoshop and Corel Paint Shop Pro now also come with some ‘buttonizing’ capabilities built in.

No shortage of options, then, for the designer who wants to incorporate some exciting button designs into his or her website!