Web Design: Buttons (Introduction)

When designing a website, buttons are typically used:

  • To contain a visually distinct hyperlink that leads the user to another location, or
  • To perform a Submit action for a web form (e.g., to send information).

Methods to Display Buttons

There are three primary ways to display a button:

  • Using the HTML <img> (image) tag to reference a graphic image stored on a web server
  • Generating a button using Cascading Style Sheets (CSS)
  • In an HTML form, referencing the Submit input type.

In this section, we explore the positives and negatives of each technical approach to adding buttons to your website, with detailed examples. Note that there is some crossover of approaches.

As a resource to our users, we collect some top-notch industry thinking on these issues and present them in a way we feel is clear. Note that we don't claim to have invented these approaches, but have adapted them for use, sometimes with our own innovations.

As a side note, in addition to the technical approaches discussed here, ther are stylistic concerns that should be considered. These are more subjective than technical considerations. It takes some practice to ensure your buttons are visually compelling, without overbalancing the content on the page. Also, the style of button you use must be consistent with the general look and feel of your website.

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