by Alex Griffioen

This tutorial will teach you how to create pretty looking textual buttons (with alternate pressed state) using CSS. Dynamic buttons save you heaps of time otherwise spent creating graphics and will basically make you a happier person at the end of the day. Here's what you'll get:

Sliding doors

Since we want our buttons to be über-flexible, we'll have to make the background image expand with the size of the button's text. For that, we'll use the beloved sliding doors technique; two complementing images creating the illusion of a single, stretching image.

Our button will be a basic tag with a nested , each containing a different slice of the background image. Here's what the HTML looks like:

Bring world peace

Nothing out of the ordinary, right? Next, we need to come up with a crisp design for our button in both normal and pressed state. Here's what I'm thinking:

We will include both states in a single image. To switch between normal and pressed state, we'll simply shift the background image vertically, revealing the alternate button state. This CSS based approach allows us to perform the switch without the need for any JavaScript trickery. Let's merge these two and apply the sliding doors cut. The part of the image that will accomodate the button text will be set to a reasonable 300px. The height we'll set to 24px.

Styling the button

Finally, we need a fair bit of CSS to bring all this together. Since we might want to line up several buttons horizontally, I decided to float them by default. (Floating them also makes the buttons wrap nicely.)

.clear { /* generic container (i.e. div) for floating buttons */
overflow: hidden;
width: 100%;
}

a.button {
background: transparent url('bg_button_a.gif') no-repeat scroll top right;
color: #444;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 24px;
margin-right: 6px;
padding-right: 18px; /* sliding doors padding */
text-decoration: none;
}

a.button span {
background: transparent url('bg_button_div.gif') no-repeat;
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
}

We now have a pretty looking button, but it doesn't exactly give us much visual feedback when we press it. So let's add that finishing touch of CSS:

a.button:active {
background-position: bottom right;
color: #000;
outline: none; /* hide dotted outline in Firefox */
}

a.button:active span {
background-position: bottom left;
padding: 6px 0 4px 18px; /* push text down 1px */
}

All done! Go ahead. Click 'em!

One extra measure for IE

Although hardly catastrophic, IE does not return the button to its normal state whenever it's released. To force such behaviour, we need to add a tiny bit of JavaScript to the tag:

…

To submit forms with this type of button, simply add more calls to the button's onclick event.

CSS hover effect

<a href="#jump-to-comments" title="view comments">18 comments

<img src="http://veerle.duoh.com/images/uploads/prukc.gif" alt="Prudential Kansas City homepage - CSS hover effect" title="Prudential Kansas City homepage - CSS hover effect" height="187" width="640">

1. <h2>4 different ways to find your Kansas City Homes for Sale</h2>
2. <ul id="differences">
3. <li id="diff-1"><h3><em>1</em><a href="benefits.html">See all MLS homes like an insider—join us</a></h3><div><p><a href="benefits.html">Join us </a> and see <strong>2,207</strong> additional homes, e-mail updates, and free custom website.</p></div></li>
4. <li id="diff-2"><h3><em>2</em>What is my house worth?</h3><div><p>Find the <a href=http://my.opera.com/"/" title="empty">value of your home</a> from any of our agents with our competitive market analysis.</p></div></li>
5. <li id="diff-3"><h3><em>3</em>Google&trade; search Kansas City area homes in MLS</h3><div><p><a href=http://my.opera.com/"/" title="empty">Search virtually all MLS homes</a> in the greater Kansas City area by using Google&trade;.</p></div></li>
6. <li id="diff-4"><h3><em>4</em>Map Kansas City real estate in Google&trade; maps </h3><div><p> <a href="cma.html" title="empty">See the location</a> of all Kansas City real estate with Google&trade; maps—map or satellite views.</p></div></li>
7. </ul>

If you look ate the page <a href=http://my.opera.com/"http://veerle.duoh.com/sandbox/prudential/no-css.html" title="view this page without CSS styles">with CSS disabled

The background images

If you look at the final page and the effect I want to achieve with the tabs, you know that I need to create background images for this that are able to grow if the user enlarges the text. Here is how they look:

• The image for the top of the tabs
• The image for the bottom of the tabs

You'll notice that both the hover background and the default background are saved as 1 gif file. This way the hover effect will go smooth without interuption. The entire image is loaded and the browser doesn't have to load the hover images on the moment the user hovers the box. To be sure the box can grow we save the bottom part of the box and the top part of the box, making it long enough to be sure there will be no gaps (till a certain enlargement).

The CSS styles

The unordered list "differences"

This is the CSS for the list starting with the unordered list of the 4 boxes. To prevent the margins to collapse I've added float:left.

1. #differences {
2. margin:0.5em 0 1.5em 0;
3. padding:0;
4. list-style:none;
5. width:100%;
6. float:left;
7. }

The li element styles look like this:

1. #differences li {
2. margin:0 18px 0 0;
3. padding:0;
4. float:left;
5. background:url(../images/diff-tabs-top-wide.gif) no-repeat 0 0;
6. }

I add a right-margin of 18px to create a gutter between each box. The last box in the row doesn't need this margin. Each li element has an id. The id for the last one is #diff-4. So I add this CSS style:

1. #differences li#diff-4 {
2. margin-right:0;
3. }

Making sure the tabbed boxes can grow

As you've noticed, we've linked the top part of the background image (the tab shape) to the li element via CSS. To make sure the tabbed boxes can grow if the user enlarges his text, we need to add an extra div in each li element. This way we can link the bottom part of the image to this div via CSS:

1. #differences div {
2. font-size:0.94em;
3. padding:6px;
4. background:url(../images/diff-tabs-bottom-wide.gif) no-repeat 0 100%;
5. }

With CSS3 we don't have to go through this hassle of adding extra divs, because CSS3 allows for multiple background images on one element. This is my top favorite CSS3 feature :)

Creating the hover effect

I've used background positioning to create the hover effect on the li element using the :hover pseudo-class. The CSS looks like this:

1. #differences li:hover {
2. background-position:-156px 0;
3. }
4. #differences li:hover div {
5. background-position:-156px 100%;
6. }

The x coordinate is set to -156px. This way the pink orange part of the background image will be shown. The first style represents the top part of the tabbed box and the 2nd one the bottom part. Remember I had to add an extra div to make sure the box can grow (till a certain enlargement).

The page uses a dynamic resolution dependent layout

Not sure if you've noticed or not, but if you resize your browser window to less then 750 pixels wide, the page will adjust its layout. This is done using a javascript created by Kevin Hale of Particle Tree in combination with CSS. I'm using an extra CSS stylesheet that is applied if the browser window is resized to less then 750 pixels. By default the page/site uses the wider version, which is aimed to a screen resolution of 1024 x 768. About 90% of the visitors of the Prudential Kansas City visitors are using a screen resolution of at least 1024 x 768 pixels.

Hopefully some of you have learned from this article and are inspired to use CSS in a creative way without overlooking the accessibility part of it and keeping the right structure in mind for the (X)HTML. I'm still creating new templates for this website on an occasional basis. <a href=http://my.opera.com/"http://www.prukc.com/" title="view the Prudential Kansas City Real Estate website">This website

Oh and let's not forget to mention that it is always great to work together with Roger. He's picky in what he does, but that's what I love about working with him, and of course I always challenge him with my designs :)