Code : Web Hackery :

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.

Glossy Button image

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:

    .gloss-button 
    {
        display: inline-block;
        overflow: hidden;
        padding: 0;
        margin: 0;
        outline: none;
        color: black;
        text-decoration: none;
    }

    .gloss-button span 
    {
        padding: 0;
        margin: 0;
        display: inline-block;
        font-size: 18px;
        line-height: 18px;
        margin: 5px 5px;
        padding: 6px 20px;
    }

So far, not much to see:

Next, we're going to use some properties that may be familiar. To start, lets put some background color on the button, and round off the corners to give it that "pill" shape:

.gloss-button { display: inline-block; overflow: hidden; padding: 0; margin: 0; outline: none; color: black; text-decoration: none;

border-radius:22px; -moz-border-radius: 22px; -webkit-border-radius: 22px; background-color: #ffde00; background-image: -moz-linear-gradient(0% 100% 90deg, #ffa800, #ffde00); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffde00), to(#ffa800));
} .gloss-button span { padding: 0; margin: 0; display: inline-block; font-size: 18px; line-height: 18px; margin: 5px 5px; padding: 6px 20px; }

Now, it's starting to look like a 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:

.gloss-button { display: inline-block; overflow: hidden; padding: 0; margin: 0; outline: none; color: black; text-decoration: none; border-radius:22px; -moz-border-radius: 22px; -webkit-border-radius: 22px; background-color: #ffde00; background-image: -moz-linear-gradient(0% 100% 90deg, #ffa800, #ffde00); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffde00), to(#ffa800)); } .gloss-button span { padding: 0; margin: 0; display: inline-block; font-size: 18px; line-height: 18px; margin: 5px 5px; padding: 6px 20px;
    -moz-border-radius: 22px;
    -webkit-border-radius: 22px; 
    border-radius: 22px;
    background-image: -webkit-gradient(linear, 
                                            0% -4px, 
                                            0% 4px, 
                                            from(#ffde00), 
                                            to(#ffa800));
    -moz-box-shadow: -3px -2px 1px -2px #fff9a8;
    -webkit-box-shadow: -3px -2px 1px -2px #fff9a8;
}

See what I did there? The box-shadow in white creates a nice highlight, and the background-gradient on the span clips the shadow.

Finally, we throw in some pseudo-class styling, to give the button some dynamism when clicked:

.gloss-button { display: inline-block; overflow: hidden; padding: 0; margin: 0; outline: none; color: black; text-decoration: none; border-radius:22px; -moz-border-radius: 22px; -webkit-border-radius: 22px; background-color: #ffde00; background-image: -moz-linear-gradient(0% 100% 90deg, #ffa800, #ffde00); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffde00), to(#ffa800)); } .gloss-button span { padding: 0; margin: 0; display: inline-block; font-size: 18px; line-height: 18px; margin: 5px 5px; padding: 6px 20px; -moz-border-radius: 22px; -webkit-border-radius: 22px; border-radius: 22px; background-image: -webkit-gradient(linear, 0% -4px, 0% 4px, from(#ffde00), to(#ffa800)); -moz-box-shadow: -3px -2px 1px -2px #fff9a8; -webkit-box-shadow: -3px -2px 1px -2px #fff9a8; }
.gloss-button:active 
{
    background-color: #ffa800;    
    background-image: none;
}

.gloss-button:active span 
{
    background-image: none;
    -moz-box-shadow: 3px 2px 1px -3px #fff9a8;
    -webkit-box-shadow: 3px 2px 1px -3px #fff9a8;        
}

And that puts the finishing touch on the Pure CSS Glossy Button: