How to create beautiful buttons with background images

Buttons are a common feature on most webpages. Every web developer will have to use buttons at some point. There is only one challenge with buttons - their default look is often uninspiring.

Another challenge with the buttons’ default look is that it is platform-dependent. On a Mac, it will look slightly different than on a PC. This becomes a problem if you want to maintain a consistent look across platforms.

CSS To The Rescue

Fortunately, thanks to CSS, you don’t have to be stuck with those boring buttons. You can create a button which looks exactly the way you want.

Now, there are actually two ways of creating beautiful buttons using CSS. The first uses background images. The second uses pure CSS. This tutorial will focus on using background images.

Using Background Images

An image is the easiest way to create an attractive button. All you have to do is put it in the background.

All you have to do is follow four simple steps. They are the following:

  1. Find the appropriate images
  2. Create the button using html
  3. Insert the image into the background
  4. Style the button’s behavior using pseudo classes

Let us look at each of the steps in detail.

1. Find the appropriate images

The first step is to find the appropriate images. There are different ways to find attractive images for buttons. You can create them using Illustrator or Fireworks. Alternatively, you can find a photo and tweak it using an editing program like Photoshop.

The most important thing is to create variants of the image to reflect the different states of the button. In the above our example, we use three images. One for the normal look of the button; one for the mouseover look, and one for the look when it is clicked. The images are the following:

Normal look of the button button-1

For the hover look of the button button-2

For the active look of the button button-3

2. Create the button

The next step is to create the button using html. The html tag you use to create the button will depend on its intended purpose purpose. In our example, we will use the  tag, as follows :

Click Me!

This creates the usual default look of a typical button.

3. Insert the image into the background

To give the button its new look, we simply insert the image into its background using the HTML background image style. CSS:

	color: transparent;
	background-image: url(images/button.jpg);
	background-repeat: no-repeat;
	border: none;

The two major rules in this style are:

color: transparent;
background-image: url(images/button.jpg);

This first rule sets the color to transparent. This makes sure that the words “Click Me” are invisible. The second rule inserts the image into the background of the button. The other rules set other attributes of the button. Refer to the CSS background image property

4. Style the button’s behavior

In most cases, buttons change appearance as the user interacts with them. For instance, hovering over a button typically changes its appearance. So does clicking on it. You can style this behavior using the CSS pseudo-classes :hover and :active.

In this case, we simply change the background image in the respective pseudo-classes, as follows:

	background-image: url(images/button-hover.jpg);
	background-image: url(images/button-active.jpg);

It’s a matter of finding the appropriate image, inserting it into the background, and using pseudo-classes to change the image when a user hovers or clicks on the button. Note that the same methods can be used with any element like a simple div with a background image.