Web Design: Buttons (Part 1: Using the <img> Tag)


Buttons Intro   |    Traditional Buttons Using Images   |    Buttons Using CSS   |    HTML buttons   |    Top


 

Generating Buttons Using Images

In the early days of the Web, buttons were usually created as independent images. These buttons, each associated with its own hyperlink, would serve as a navigation method to reach other content. While this approach is still viable, it was developed before effective implementation of Cascading Style Sheets enabled more efficient options. First, we explore the concepts behind generating and implementing button images as hyperlinks.

For this example, we will use two buttons, intended to serve as navigation to link to two distinct web pages on a website (e.g., Home and About.

The first step is for a website designer to use a graphics program to create or modify a button image:

blank blue button

Then, the designer would add a text label (e.g., Home) as part of the image. The image would be uploaded to the webserver. For this example, we use the images directory under the root director of the website, e.g., <root>/images/. The updated image would appear as follows:

home button

The designer would then make a copy of the image, changing the text label to About, and load that second image in the same directory. For each additional button, the designer would create and upload a separate, tailored image. The code to display these buttons would typically include:

  • The image tag
  • The source (location on the web server where the graphic is loaded)
  • Using best practices, the image dimensions. (If you specify the width and height of an image in pixels, then the server does not need to derive that information before beginning to render the web page.)
  • Using best practices, alternative text. (The text you specify in this property displays in place of the image if the image cannot be located at the referenced source, or if the user disabled images to speed up browsing).

Here is sample code:

Code for Two Buttons as Separate Graphic Images


<p><img src="images/btn_home.png" width="85" height="30" alt="home" />
<img src="images/btn_about.png" width="85" height="30" alt="about" /><p>

The result:
home button About button sample

Hypertext anchors (and anchor close tags) are then included to wrap each button so that the appropriate web page is the destination when a user clicks on that button:

<p>
<a href="home.htm"><img src="images/btn_home.png" width="85" height="30" alt="home" /></a>
<a href="about.htm"><img src="images/btn_about.png" width="85" height="30" alt="about" /></a><p>

Notes:

  1. For the sake of simplicity, hypertext links will not be included in the remaining code samples. Appropriate use of hypertext links is assumed.
  2. No hypertext links are associated with sample buttons on this page.

These button sets might be used vertically or horizontally. If used vertically, as a column of buttons, then each button would typically be wrapped in its own set of start and end paragraph tags. If that resulted in too much space between each, the developer would include a break <br /> tag between the code for each button and link.

If used horizontally, as a row of buttons, then a method was required for creating space between each button.


Spacing Between Buttons in a Horizontal Row

Old School Methods

For horizontally aligned rows of buttons, tricks were traditionally employed to add visual space between the buttons. One method is to hard-code several non-breaking spaces &nbsp; between images. This might look as follows:

Code for Two Buttons Separated by Non-Breaking Spaces

<p><img src="images/btn_home.png" width="85" height="30" alt="home" />&nbsp;&nbsp;&nbsp;&nbsp;
<img src="images/btn_about.png" width="85" height="30" alt="about" /><p>

The result:

home button     About button sample

Another trick frequently employed was to use a clear GIF image between button images. This allowed you to specify a width in pixels between your button images.

Code for Two Buttons Separated by a Clear GIF Image


<p><img src="images/btn_home.png" width="85" height="30" alt="home" />
<img src="images/spacer.gif" width="25" alt="spacer" />

<img src="images/btn_about.png" width="85" height="30" alt="about" /><p>

The result:
home button spacer About button sample

Current Practice

For HTML or XML that is compliant with modern specifications, web developers typically use CSS to create spacing effects:

Code for Two Buttons Separated Using Padding in CSS


<p><img src="images/btn/btn_lt_blue_85_home.png" alt="home button" style="padding-left:25px;" />
<p><img src="images/btn/btn_lt_blue_85_about.png" alt="about button" style="padding-left:25px;" />

Negative Aspects of Using Separate Images for Buttons

Downsides to this approach are as follows:

  1. This required substantial image manipulation.
  2. Using many separate button images requires more web space and uses more bandwidth.
  3. Development time and effort was expended churning out button images and uploading them.

Read on for other approaches to including buttons on your website.


Buttons Intro   |    Traditional Buttons Using Images   |    Buttons Using CSS   |    HTML buttons   |    Top