Custom buttons add flavor and increase the impact of your site. But, firing up a graphics editor just to change some text gets old fast.

Here’s how to make custom buttons which will reduce load times and give you the ability to easily edit each button text individually.

If making custom buttons yourself sounds a bit daunting, check out our gallery of Custom AspDotnetStorefront buttons.

The core of this method uses a technique called “CSS Sprites”. A sprite is a single image consisting of a number of sub-images arranged in a regular pattern. Using that pattern, you can display any single sub-image out of the main image.

fig. 1

In Figure 1 you can see a sprite that is made up of nine book icons. The icons are arranged in a grid, with each cell being 32 x 32 pixels. Knowing this, we could select the book with the red arrow by selecting a 32 x 32 pixel block that starts 32 pixels from the left and 64 pixels from the top.

Sprites can be used in CSS with the width, height, background-image, and background-position styles. You can take an element, specify our sprite as the background image, select our cell size by setting the width and height appropriately, and select the sub-image we want to display by adjusting the background-position style to move the sprite within our element.

fig. 2

The rest of the background sprite will be invisible except for the small “window” that can be seen through our element, as shown in Figure 2.

This might seem like a lot of hoops to jump through for a background image, but if used properly it’ll help speed load times.

Every image has to be loaded by the browser and incurs an initial delay to make the request, then the time to actually load the media. Each requests increases the demand on your server.

By using a sprite, you can have the browser request a virtually unlimited number of images in a single request, reducing load and improving overall response time. This technique is commonly used by high traffic sites that have a lot of repeating elements.

We apply this technique to a very common situation: graphical buttons.

While basic CSS allows for button styling, the limited nature of CSS styles confines us to simple boxes. To go beyond that, we need to use custom graphics. Unfortunately, CSS doesn’t allow us to dynamically resize background images. Instead, we will provide a fixed set of background image sizes as a sprite, and apply the correct size as a CSS class.

First, let’s create a simple HTML button:

<input type="button" value="Hello" />

This gives us the following:

That’s a bit of a letdown.

Let’s add a background.

fig. 3 - button.png

Figure 3, button.png, is a sample sprite that consists of seven button backgrounds arranged one per row in decreasing size.

Each background is 34 pixels high, and each is 25 pixels narrower than the previous, ranging from 200 pixels down to 50.

Here’s the CSS:

input[type="button"]
{
	font-weight: bold;
	color: Green;
	background-image: url(button.png);
height: 34px;
width: 75px;
background-position: 0px 68px;
}

To turn the sprites into buttons we can use:

1. First we set the background image to our sprite.
2. Next we set the height and width of the element to the size of the “window” we want into our background image.
3. Finally, we slide out the background image so that the second background, the one that’s 75 pixels wide, is showing.

The background-position style in the CSS indicates where you would like to position the background in your element, with the first value being the horizontal distance from the left edge and the second being the vertical distance from the bottom.

In our case, we want our background to start on the left edge (0px) and at the top-left corner of the second background from the bottom (68px). Let’s see how it turned out:

That’s not exactly what we were hoping for, but clearly our background is displaying. Now we need to modify the style to remove the existing button styling that is conflicting with our own:

input[type="button"]
{
	font-weight: bold;
	color: Green;
	background-image: url(button.png);
height: 34px;
width: 75px;
background-position: 0px 68px;
line-height: 34px;
padding: 0px;
border-style: none;
background-color: Transparent;
}

We clear the padding, border, and background styles, and set the line height to match the height of our element so that the text is vertically centered. This now gives us the following:

That worked well for a 75 pixel wide button, but what about all of those other backgrounds in the sprite?

Let’s tweak our CSS and create two additional styles for two different lengths:

input[type="button"]
{
	font-weight: bold;
	color: Green;
	background-image: url(button.png);
height: 34px;
width: 75px;
background-position: 0px 68px;
line-height: 34px;
padding: 0px;
border-style: none;
background-color: Transparent;
}
 
Input[type="button"].b75
{
width: 75px;
background-position: 0px 68px;
}
 
Input[type="button"].b150
{
width: 150px;
background-position: 0px 170px;
}

We’ve removed the width-specific styles and placed them in their own style with a class name reflecting the width. In the case of the 150 pixel class, we’ve also moved the background position to display the fourth background from the bottom.

Now we can create a button for each class:

<input class="b75" type="button" value="Hello" />
<input class="b150" type="button" value="How are you?" />

Now we have two sizes:

You can easily create styles for the remaining sizes.

fig. 4

One last feature of sprites is that it’s easy to change the style of a button by switching out the background image.

For example, if we wanted to style disabled buttons as grayed out, we could use the sprite in Figure 4.

Then, by simply switching the background-image style, we can have the buttons display as we want:

input[type="button"]
{
	font-weight: bold;
	color: Green;
	background-image: url(buttons.png);
height: 34px;
line-height: 34px;
padding: 0px;
border-style: none;
background-color: Transparent;
}
 
input[type="button"][disabled]
{
color: #CCCCCC;
background-image: url(buttons_disabled.png);
}
 
Input[type="button"].b75
{
width: 75px;
background-position: 0px 68px;
}
 
Input[type="button"].b150
{
width: 150px;
background-position: 0px 170px;
}

Now we can set the disabled attribute on the buttons:

<input class="b75" type="button" value="Hello" />
<input class="b150" type="button" value="How are you?" />
<input class="b75" disabled="disabled" type="button" value="Goodbye" />
<input class="b150" disabled="disabled" type="button" value="See you later" />

Let’s take a look at them in action:

You can also easily add images for other states, like :hover and :active.

Looking for a faster and easier solution to custom buttons?  Check out our Custom AspDotnetStorefront buttons.

Tags: aspdotnetstorefront css, css sprites buttons, custom adnsf buttons, custom aspdotnetstorefront buttons, custom buttons

This entry was posted on Friday, March 13th, 2009 at 3:30 pm and is filed under AspDotNetStoreFront, Coder's Corner, Design, Graphics & Images, Navigation. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.