Web Button JavaScript Code

The first two demos in this series covered creating the button with a 3-D appearance, and adding text to its face. If you have not yet created your button, you may want to watch these demos first.

(Click on "Play" button to watch tutorial. A new window will open.)

Using Microsoft® Paint to Create a 3-D Web Page Button.

Using Paint to Add Text to Your 3-D Button.

And here is the third demo if you wish to review it again.

Using Paint to Create the Pushed-In Appearance of Your 3-D Button.

Actually, creating the depressed version of the button is quite simple. Requiring only a few steps that involve changing the shading to different sides of the graphic. The real challenge with this task is making the depressed image replace the un-pressed image on the web page; at the exact moment the visitor clicks on it. Then having the un-pressed image return as soon as the mouse button is released.

To accomplish this magic, we will recruit the help of a popular scripting language called JavaScript. You don't need to be real familiar with the JavaScript code in order to make this work. However, you should at least have a general knowledge of HTML (web page design language).

The JavaScript that will make your button interactive, is on a separate web page complete with instructions. Click the button at the bottom of this page to get the code. This particular button is also an example of the code in action. You can copy the code straight from the web page, and paste it into your HTML document. The instructions will tell you what lines to change in order to customize the code for your page.

You will need to upload both the un-pressed, and depressed versions of your button graphic to your website. Be sure to convert your buttons to a compatible format, so that they will be viewable in all web browsers.

Since the button requires JavaScript to be interactive, it will only be interactive in JavaScript enabled browsers. The majority of web surfers use these browsers. However, some are still using older browsers, or they have shut off JavaScript in their preferences. These visitors will still see the button in its un-pressed state, but will not see it depressing when clicked.