Introduction

Building web site interfaces with all the navigation bars and menus has become incredibly easy nowadays. All you need is a modern graphic editor like Photoshop, or Fireworks, or Illustrator (even Photo-Paint from Corel would do). You design your interface using the editor tools, slice in pieces, assign roll-overs and export with all the graphics, HTML and JavaScript.  This is a great way to build web site navigation and probably is the best one when you’re working with a customer who will never visit his web site again (and who is getting it in the first place only because it’s hip).

On the other hand if you’re dealing with a client who needs to post frequent updates or building a custom design web application, things can get messy pretty quick. Every time you have to change something you need to modify your graphic file, export it again overwriting the existing files (which you may have already customized) and make the necessary adjustments.

Oh no, not again! You just got it all nice a pretty and now she wants to add more buttons or change the labels on the existing ones? This happens again in two weeks, then again in another week, then again and again.
Before you know it the file list in your images folder has gotten long as Rapunzel’s mane (with all the roll-overs and roll-unders  - you gotta have those!) and you are having a tough time locating an image you need to edit. Try to do a makeover or a new skin for an image-based interface – it’ll take you almost as long as creating a new interface from scratch.
But the worst case scenario is when you get a client who runs to you from a “bad” developer with no source files (the graphic file for the interface) and you have to clean up somebody’s mess.

You get the point, right? The solution is simple: build your navigation menus using the HTML <button> tag in conjunction with CSS and JavaScript. Using this approach you will keep all the advantages of the image-based interface, but you will also gain flexibility and some great features, especially when building web application which require high level of customization, ability to disable navigation components based on user permissions and skinning.

And now without further adieu the HTML <button> tag.