CSS Button and HTML Form Input Beautification

These examples were created to illustrate the ability of CSS to influence the appearance of HTML FORM controls. It was created to illustrate how Freeservers.com could use HTML buttons instead of the images in their interface for contextual HELP buttons.

A disadvantage to using image swaps is the additional trip to the server. Though frankly unless the image is huge, your visitor's connection is slow like molasses, and/or you disallow caching, this is probably a minor issue. Another disadvantage of images is that you have to produce various images to display the states you get with HTML buttons. For example, the "pressed down" state. Keep in mind that many designers actually consider this an advantage (since it means work for them ;-) and since they may consider the HTML button to be crude and programmer-like. (Wow, so much pent-up frustration, why would anyone become a designer? :-)

The disadvantages associated with graphics, can be avoided altogether by using a form button and styling it using CSS. Here are some simple examples using color, fonts, and sizing.

HTML FORM Controls

Notice how fast these are. They take advantage of the IE 4.X+ ability to alert properties of DOM containers AFTER the initial rendering has completed. Buttons can be created in all sizes and even contain line feeds ...but why?

IMAGE version

Here is an example of the existing graphical help button found in utility templates... with the addition of two more graphics to allow it to appear to respond to the users mouseover and click events. It highlights when moused over and depresses when clicked. The disadvantage to using this method is the extra time needed to get the images from the server.

« Home