Many modern sites make use of two or three-state buttons to provide an added degree of interactivity when navigating across pages or submitting a form. It’s possible to create two and three state buttons using straight CSS or images. This article focuses on using a type of image file referred to as a sprite sheet in combination with CSS link styles to create ASP.NET HyperLink and LinkButton controls. Using the techniques in this article you can create buttons that look like the following and interact with them using standard ASP.NET controls:
Click here to see the ASP.NET Example Page
What is a Sprite Sheet?
The term sprite sheet refers to an image file composed of multiple images, usually with a transparent background and of type PNG or GIF. Sprite sheets were first used in games to load many images into memory simultaneously to allow for fast switching. Recently sprite sheets have come into usage on web pages due to the CSS background-image, background-position, and background-repeat properties. Using the background properties, we can load multiple images into 1 file and then use the background-position combined with CSS width and height attributes to index to a specific “sub-image” within the sprite sheet.
Why Use Sprite Sheets?
Using sprite sheets to style image buttons means you can get fast switching between states as the user mouses over and/or clicks the button without having to load the image from the server (possibly causing a flicker) or having to resort to the now-outdated technique of pre-loading images with JavaScript.
Step 1: Create the Sprite Sheet
Naturally the first step is to have some type of image to work with. You can either make the sprite sheet yourself, ask a designer to make one, or purchase pre-made images from GraphicRiver.net or similar image sites.
A common pattern used to create button sprite sheets is to build one PNG per button with each of the 3 states stacked on top of each other. If you are using PhotoShop and the images were designed in this way, then you can slice each button out into a transparent PNG. For this example I’ve created “Previous” and “Next” buttons using an image set I purchased from GraphicRiver.net. Each column in the table below shows the PNG file for the Previous button, and each column highlights a different “sub-image” to demonstrate how the 3 states for Normal, Hover, and Active are stacked on top of each other in the PNG sprite sheet.
The Normal, or “up” state sub-image in column 1 starts at position 0,0 and is 51 pixels high and 186 pixels wide. The Hover, or “mouse-over” state sub-image in column 2 starts at position 0,-66 and is also 51 pixels high and 186 pixels wide. The Active, or “clicked” state sub-image in column 3 starts at position 0, –132 and is 51 pixels high and 186 pixels wide.
Step 2: Create the Styles
Once you have the sprite sheet setup with the 3 images stacked we can define the CSS styles for the images. Since the only thing that varies is where each image starts, we can put most of the styles in the link element and then we only have to define the unique starting position for the hover and active states. Finally we can define a style for each unique image file that points to the sprite sheet and defines its unique width:
.spriteButton a {
background-position: 0 0;
background-repeat: no-repeat;
height: 51px;
display: inline-block;
outline: none;
}
.spriteButton a:hover {
background-position: -0px -66px;
background-repeat: no-repeat;
}
.spriteButton a:active {
background-position: -0px -132px;
background-repeat: no-repeat;
}
.next a {
background-image: url('/images/next.png');
width: 145px;
}
.previous a {
background-image: url('/images/previous.png');
width: 186px;
}
Step 3: Write the ASP.NET Code
Having defined the styles, we can now use them as the class assignment for a span tag that surrounds link elements. The code below is for the ASP.NET example page which shows normal href links and ASP.NET HyperLink and LinkButton controls. Using a span instead of assigning the CSS class to the link or image works better with the CSS background properties and across browsers. If you want some padding above and below your image you could also use a div instead of a span.
ASPX
<form id="form1" runat="server">
<h1>Simple Links</h1>
<p>
<span class="spriteButton previous"><a href=""></a></span>
<span class="spriteButton next"><a href=""></a></span>
</p>
<h1>ASP.NET HyperLink and LinkButton Controls</h1>
<p>
<span class="spriteButton previous">
<asp:HyperLink NavigateUrl="" runat="server" />
</span>
<span class="spriteButton next">
<asp:LinkButton OnClick="NextButtonClick" runat="server" />
</span>
</p>
</form>
Code-Behind
protected void NextButtonClick(object sender, EventArgs e)
{
// do something
}
References & Tools
Hopefully this article will inspire you to take on creating sprite sheets the next time you need to use image buttons in a project. Really the hardest part is creating the image, after that the CSS is straightforward once you’ve gained an understanding of the CSS background attributes. There’s a lot more that can be done with sprite sheets then just simple buttons. Check out the tools and references listed below to learn more.
CSS Sprites Generator
The Mystery of CSS Sprites: Techniques, Tools And Tutorials [Smashing Magazine]
Sprite Sheet Builder 1.0
Pure CSS Image Rollovers
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them