Buttons That Work

A button is a graphic with a 3-D look. Because it looks like a push-button on an electronic device, its look suggests to a computer software user to click on the graphic with his mouse. Buttons are commonly used by graphic-oriented operating systems, such as Windows.

Because buttons send out an unconsious message “Click me!”, they are commonly used in World Wide Web advertising. Surprisingly enough, most graphic-editing software does not offer the option to create a button automatically. You need to draw it by hand.

Drawing a button is not as simple as it may seem. This is quite obvious from a proliferation of buttons on the web, buttons that are generally nice looking, but that do not send that subliminal signal to click them.

To produce the desired unconscious signal, a button should be designed to look exactly like buttons used by Windows. Not because there is something magical about Windows and the algorithms it uses to produce buttons, but because Windows is so common that a Windows-like button automatically creates the important unconscious association with something one should click on.

The background of this type of button can be of any color, as long as its frame is drawn the same way Windows would. Here is an example of a random-colored Windows-style button:


Random button


But the most effective button has the same background color as the surrounding area, since this is how Windows users see it most of the time. So, let’s try again:


Same color as surroundings


It can also be of any size, although 88 by 31 pixels is an unofficial Internet standard for small buttons, and 468 by 60 pixels for banners. Banners, of course, can also be designed as buttons to produce the same subliminal effect:

Banner-sized button


You may, however, want to use a pop-up window when designing banner-sized graphics instead.

The first step to creating a button is to produce a graphic with a uniform background and with the appropriate frame. Once you have the graphic, you can import it into just about any bitmap-editing program and paint it with a picture, add some text, or both.

Whiz Kid Technomagic button maker takes the guessing game out of this first step. All you have to do is fill out the form below and click on “Make a Button!” Optionally, you can have it create a button that appears pushed as in the example below:


Pushed button


Another option is to use the Netscape color scheme which comprises only 216 colors, in which the values of the red, green, and blue components are multiples of 51. You can, of course, calculate these values yourself before entering them in the form, or you can select “Netscape Colors” and have our software find the closest match for you.

You may also select the “Default Button” option. This will make the button look “selected”. Windows dialog boxes often have one button selected. If the user presses the Enter key, Windows acts as if the selected, or default, button was clicked on. Here is what it looks like:

Default button


But be careful before deciding to make your button in the “default” style for the use on the Internet. If the user presses Enter, nothing will happen. His browser does not know that your graphic is meant to be selected. However, it may be useful as the select graphic for a form.

What if you want a white button? You could just set the red, green, and blue components to 255, I suppose, but the result would seem to be missing a part of the frame:

r=g=b=255


I do not know how Windows resolves this problem (I do not recall ever seeing a white button under Windows). Yet, white buttons seem to be popular on the web. You can create a better looking white button by entering the red, green, and blue components of the surrounding area and selecting “white button” in the form below:

White button


You may wish to make it an “input field” instead of a button. This is used by Windows for text input as well as for checkboxes. In this case, the button color will be replaced by white. Nevertheless, you still to need to choose the “button” color (which should be the color of the surrounding area) so we can properly figure out the colors used by its frame.

Input field


If you do choose the input field, the pushed and default button options will be ignored.

Finally, you may opt for a navigating arrow to appear inside the button. You can have it point left, right, up, or down. You may also choose its color. If you go for this option, I suggest you make the button square (equal width and height) for the best visual results. Additionally, it is best to have the width and height a multiple of four.

Up arrow
Left arrow Right arrow
Down arrow

Note that to have enough room for the frame, the width and the height of the button must be at least 5 each (9 for default buttons). Our software enforces this limit, so if you enter a smaller value, you’ll get something like this:


Smallest button possible


Of course, that is not much of a button. No restriction is made on the maximum size.

Red (0 - 255)
Green (0 - 255)
Blue (0 - 255)
Width (5+)
Height (5+)
Pushed
Netscape Colors
Default Button
White Button
Input Field

Arrow Red
Arrow Green
Arrow Blue
None
Left
Right
Up
Down


Pop-Up Windows

As mentioned above, you can easily design banner-sized buttons. But “pop-up windows” are better suited here. Again, there is no magical reason for this. It is just that the majority of computer users are used to seeing them on their Windows desktop as well as in various Windows programs.

A pop-up window is very similar to a button, except it comes with a slightly different frame. Indeed, the way it usually works is: there is a larger pop-up window which contains one or more buttons, one of which is usually a default button. Here is an example taken from an actual Windows program:



Unlike a button, a pop-up window cannot be pushed or selected. However, only one pop-up window can be “active” at any one time. You can easily determine which window is active by the color of its title bar.

Also, a pop-up window is usually not of the same color as its surroundings. And, it usually has the above-mentioned title bar. Additionally, it can have one or more “push buttons” at the right end of the title bar (the example above does not have any). The most common of these is what I shall refer to as the “kill button”, since clicking it “kills” the window.

The same software you used above to create a button can also create pop-up windows. You can use the form below for this purpose. You will find more options:

You may ask it to include the title bar, in which case you also need to select its color. You may ask for a blank push button, or for a kill button (if you select both, it will give you the kill button). You may ask for the push/kill button to be pushed. You cannot ask for a default window, since there is no such thing. Minimum size is 25 by 25 pixels.

The defaults in this form will create a banner-sized pop-up window with a title bar and a kill button, using the Windows default color scheme. But feel free to change any values.

You can open the result in just about any graphics editing software to add text, other graphics, and any buttons you have created above. Enjoy!

Red (0 - 255)
Green (0 - 255)
Blue (0 - 255)
Width (25+)
Height (25+)
Pushed
Netscape Colors
White Window
Title Bar
Push Button
Kill Button
Title Bar Color:
Red (0 - 255) Green (0 - 255) Blue (0 - 255)

Dynamic Pop-Up Windows

Using graphics to communicate your message on the web has at least two disadvantages:

Let me propose an alternative that looks just as good as pop-up windows to those who can see, while communicating your message to everyone, human or computer. I will refer to this alternative as “dynamic pop-up windows”.

I call them pop-up windows, because they look—and work—just like ordinary pop-up windows.

I call them dynamic, because they are automatically resized to fit the text that you put in them. Their width is constant, but their height is adjusted as necessary.

Rather than just talk about it, let me show you. THIS is an example of a dynamic pop-up window.

Its width is static at 468 pixels, the width of a typical banner. But its height depends on what fonts you have installed on your system and what font size your browser is set up to use.


If you don’t believe me, try any of these tests:

So, how did I do it? Quite simple: I split a pop-up window into three graphics—top, middle, and bottom. All three are 468 pixels wide. Their height? OK, here it is:

Well, actually I did not split it, not by hand, mind you. I wrote a program to do it for me. The same program you have been using to create your buttons and pop-up windows above.

To combine the three graphics, and the text, into a dynamic pop-up window you need to create two HTML tables, an external and an internal one. For it to work right, the tables must follow these rules:

Alas, there is more: If your internal table contains more than one column per row, Netscape will do something really bizarre: It will reuse the background graphic for each of the columns, so the tiny frame on the left becomes visible. Explorer does not have this problem.

Solution? Create a forth graphic, just one pixel by one pixel, and make it the background of the internal table, which you need to make slightly smaller and centered. That bypasses the Netscape bug without causing problems in Explorer.

There is yet another bug in Netscape. If you use checkboxes in a form, it will show some of the background color of the page around them no matter what the background of the table. I have not found a workarround. If you know how to solve this problem, please e-mail me.

I suppose you’d like to see some source code after all this talk, so here is an example:


      <table border="0" cellspacing="0" cellpadding="0" width="468" background="middle.gif">
      <tr><td><img src="top.gif" width="468" height="3" border="0"></td></tr>
      <tr><td>
        <center>
        <table width="98%" border="0" cellspacing="0" cellpadding="15" background="onepixel.gif">
            <tr><td>YOUR TEXT COMES HERE...</td></tr>
        </table>
        </center>
      </td></tr>
      <tr><td><img src="bottom.gif" width="468" height="3" border="0"></td></tr>
      </table>

The following form has the same options as the one that created a regular pop-up window, except you do not choose the height. You will receive three graphics as described above, plus the one-pixel background needed to fix the Netscape bug. Their heights will be:

Assuming your browser supports resizing of graphics, the middle and the background graphic will be displayed larger than they actually are. Otherwise, you might have difficulty right-clicking on them to save them.

Incidentally, this form’s accept button (marked “Split It!”) is actually a default button graphic made in the first section of this page. I added the text with Corel Photo-Paint.

Red (0 - 255)
Green (0 - 255)
Blue (0 - 255)
Width (25+)
Pushed
Netscape Colors
White Window
Title Bar
Push Button
Kill Button
Title Bar Color:
Red (0 - 255) Green (0 - 255) Blue (0 - 255)



NOTE: I have recently discovered a fascinating article, The Art of Single Pixel Images, by J. Scott Hamlin, which shows you how you can use those one-pixel-by-one-pixel graphics you produce here in some very creative ways. Highly recommended reading!


HOME ] [ CGI TUTORIAL ] [ MARKETING SECRETS ]

WebRing of Free GIFs
This Web-Ring of Free GIFs

site is owned by G. Adam Stanislav

Previous | Random | Join | List | Next

Next Site