Austin Web Design Blog

CSS Sprite Hover Image for Call to Action Button

Call to Action Buttons are a great way to get your site’s visitors to engage with your site and to “take action”. Since this button will need to stand out it will most likely take some space on your page. The goal with this tutorial is to create an attractive button graphic while maintaining the text as plain text in your HTML. This will have the dual benefits of maintaining your Search Engine Optimization and eliminating the need to use unnecessary Javascript to create the rollover effect. Of course, eventually you may want to use CSS3 to create appealing buttons, however at this time CSS3 methods are not supported by all the browsers you might need to give a satisfactory experience to most users of your site. This CSS sprite method is acceptable by all major browsers and recent versions of Internet Explorer. For more detailed information on this method please read the article “CSS Sprites: Image Slicing’s Kiss of Death” by Dave Shea.

For this example I will use the new Call to Action Button for our re-design of the Completebook & Media Supply site. You can see a functioning button and view source to follow along here. Plus, with all of the webfonts now available there is even less reason to embed text in your images.

Step 1 – Add Your Link with Class

First, add your link to your HTML, and give the anchor tag a class:

Link: a href=”” class=”btn_sign_up”

Search engines pay special attention to link text and check this text against the content of the page you link to. It is therefore a good idea to use text within your anchor tag rather than using an image with embedded text.

Step 2 – Create Your Button

Use your graphics program of choice to create a nice button graphic for the text to sit on. Once you finish, double the height of your canvas, drag a copy of your button below it, and create a hover effect. In the case of this example I made the hover “glow” a bit. This is your sprite image. you should have something like this:

Sign Up Button

Step 3 – Add CSS and Position Graphic

In your CSS document or section in your page, link your background image with CSS using the background property. Give the image a position of top which positions the top of the image with the top of the link. Give the hover image a position of bottom, positioning the bottom of the image with the bottom of the link. No Javascript hover code will be necessary, and also you will not need a preload script in order to make your hover effect available. Once your site visitors see the button, the image is available. If you’re using a small image for the background you may need the no-repeat declaration to stop the image from tiling. Here is an example of the code:

.btn_sign_up {background: url(../images/blog/btn_sign_up.png) top no-repeat; }
.btn_sign_up:hover {background: url(../images/blog/btn_sign_up.png) bottom no-repeat;}

Add other text information such as color, size, and font family.

Step 4 – Add Dimensions

Notice now that the button is only the width and height of the text itself. The next step is to add width and height to your css button:

width: 307px;

In order for the height to take effect you must also add a display:block declaration. Otherwise, the link remains an inline element and height is determined by the font size and line height of the text.

Step 5 – Position the Text

Give some top padding to the link. In the case of our example I want the “SIGN UP” text to be position. Since we are adding 18px of padding on the top, we now have to subtract those pixels from the height. Otherwise, the height will be 49px + 18px – too tall.

I also have added a around the “SIGN UP” text because I want to separate this slightly from the rest of the text on the button. I gave this padding on the left and right. Since this padding is on an element inside the link and not on the link itself, no further math needs to be done on the width of the button.

That’s it! CSS Sprite buttons are easy to make, reduce your dependence on Javascript, ensure that your link is read by Search Engines, and also have the added bonus of separating your style from your content. Keeping the styling in your stylesheet and your text and basic layout in your HTML makes it easier for everyone who may be working on the project to read and update your code. CSS sprites are simple to implement and also allow your graphics to be re-used with different text if you like without lots of additional images being needed.

Thu, 28 Jul 2011 10:09

Tags , , , , , , , , , , ,

Comment CSS Sprite Hover Image for Call to Action Button