Pure CSS Glossy Button

I like to challenge myself when I'm working on web presentation.

Last year, at work, the Creative department designed a new style of button to replace our old implementation. It was a fairly graphical button style, and I immediately began wondering if there was a way to avoid images and slicing. The typical solution to this problem is a sliding doors approach.

I knew going in, that even if I managed to implement the design using some advanced CSS, I'd still need sliding doors to support IE 6, 7, and 8. This framed the initial markup for the solution. I decided to start with the smallest markup footprint that can achieve the backwards compatibility:

<a href="#" class="gloss-button">
<span>Glossy Button</span>
</a>

I leave the sliding doors implementation as an exercise for the reader. That's not what this article is about. The interesting problem to me is how to take the above markup and make it look like the glossy button design without any images.

The first steps are pretty straight-forward. We begin by getting rid of some default styles and setting up the basic dimensions of the button:

So now, the real magic. How to get that subtle glossy highlight? The trick is to use that span that would otherwise be sitting there, only used for the sliding-doors. Watch carefully, we're about to do something tricky: