Web buttons

27/04/2009

Web buttons are one of the most important things in web design. Their style changes constantly to follow current trends. Find out what’s important to keep in mind while creating button templates for dynamic imaging.

Web button samples

View more web button examples at:

Suggest a link

Things to consider:

  • Size – pick sizes and shapes that can be easily used in different web designs;
  • Color space – use RGB;
  • Button colors – use layers to make the buttons change colors easily;
  • Icons – Assign a selection of icons (symbols) as image options.

Types of web buttons

Web buttons can be categorized into:

  • Menus
  • Tabs
  • Badges
  • Buttons

Read more about types of web buttons.

Icons

Web menu buttons with icons

When creating buttons for website menus, keep in mind that in some cases, buttons are not only identified by the text on them but from the icon (symbol) as well. Learn how to assign a selection of icons in a web button template.

Button colors

The buttons must flow with the rest of the website design they are used in. Apart from their size and shape, the most important thing to ensure they fit the rest of the design are the colors.

Web menu button colors/

/

Make your web button templates as generic as posible by layering the objects in way that the user is required to change a single background image or color to get a button with the desired color.Learn how to make  chameleon web buttons.

/

Depending on the goal you’re trying to achieve, you can:

  • assign a selection of images as the background color, texture or pattern variations or
  • assign a color picker to the image field giving users the option of picking any color from the palette.

Color space

Use RGB color mode. All PC displays function this way and to make sure the colors in the button are the same as the ones you chose on your monitor, use RGB colors.

Image quality

PC displays have 72DPI or 96DPI of resolution. Same as most web-to-web templates, the image placeholders inside it should have 72 DPI or 96 DPI of resolution.

Image and HTML buttons

There are 2 ways of making nice buttons or any other web page elements:

  1. Preparing images, slicing, laying out;
  2. Placing HTML text over them.

The limitations are the fonts and the way the text looks. For example you cannot make the text go vertically or on an angle.

Resources

You may also find these resources usefull:

Suggest a link
See also: