Resizable Buttons Using CSS Sprites

In a world where we’re increasingly focusing our website design efforts towards the delights of CSS3, it’s quite easy to forget those who haven’t made the switch to modern browsers. Even though it’s beneficial to keep a finger in all of the latest pies. I still want my websites to look exactly as I designed them in all browsers. At the end of the day, I’m looking to ensure that my clients receive as much business as they can, so everyone matters.

I just wanted to go through a commonly used little technique, which allows you to create resizable buttons with rollover states using CSS sprites. This technique is found all over the web these days, and in particular where I started using this, with Magento’s very popular, Modern Theme.

So how does it work?

The technique basically uses an anchor link with a span snugly fitting inside. The two elements both have background images, one provides the left hand site and the expanding middle, and the other has a right positioned closing image, which completes the look of the button.

It’s a very simple concept that works in-combination with the basic CSS sprite to give us an effective and cross-browser button.

Creating the background image

In order to get a better idea of how this works, you can see the single image that I will be using. The image and the Photoshop file are both contained within the download folder at the bottom of the post.

The HTML

<a class="my-button" href="#" title="My Button"><span>My Button</span></a>

The CSS

a.my-button { background:url(button_small.gif) no-repeat top right; display: block; float: left; height: 40px; margin-right: 20px; padding-right: 25px; text-decoration: none; font-size:1.2em; font-weight:bold; text-transform:uppercase; }

a.my-button span { background:url(button_large.gif) no-repeat; display: block; line-height: 40px; padding: 0 0 0 25px; color: #333; }

a.my-button:hover span { background-position: 0 -40px; color: #fff; }

a.my-button:hover { background-position: right -40px; }

Download the files

Please fell free to download the files that I’ve used including…

• HTML
• CSS
• Graphics files, both PSD and PNG

Beware of IE6

No good blog post would be complete without the footnote warning of the potential dangers of using this technique with IE6. Although the example I’ve used, should be fine, bear in mind that the background positioning of a PNG causes issues in IE6. This could be avoided with a PNG fix.