FeatherPot

In this tutorial I will show you how to create textual buttons (with alternate “Pressed State”) using CSS. And after trying this you might be the happiest person in the end of the day !

Sliding Doors

Since we want our buttons to be flexible, we need to expand the background with the texts. 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 <a> tag with a nested <span>, each containing a different slice of the background image. Here’s what the HTML looks like:

<a class=”button” href=”#”><span>Bring world peace</span></a>

Nothing special with that right, So we need some images and some more CSS to complete our work.

I am planning to built a design like this :

Raised                                      Pressed

We can include both the stage in single image and apply it by shifting image vertically using the CSS. The main benefit is this CSS based approach is we can use alternate states for a button without any JavaScript. Let’s merge these two and apply the sliding doors cut. The part of the image that will accommodate the button text will be set to a reasonable 300px. The height we’ll set to 24px.

SPAN                                            A

Styling the button

Finally we need some CSS to bring all these things work.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_span.gif’) no-repeat;
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
}

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 */
}

Yo! All done ! Go ahead and try it on a rough HTML page or get a preview here.

Although we have done everything fine, IE will not return the button to its raised state after pressing it. So we need to add a little JavaScript there.

<a class=”button” href=”#” onclick=”this.blur();”> … </a>

Take your Demo at my Playground