building beautiful buttons with css gradients

A special thanks to Ryan Doherty for building this demo and making it easy for me to turn it into a tutorial.

In this demo we’ll walk through a simple use case for the new gradient capabilities coming in Firefox 3.6 (see related article). We’ll build a nice-looking embossed and beveled button using gradients and existing CSS properties. The button in question was developed for the next version of our Personas site.

Using a CSS-based method to generate buttons is a huge upgrade for web site developers. It means you don’t have to regenerate images every time you change text, pages will load much faster because you don’t have to download separate images and it allows text to be easily localized. In this case it also makes the page better from an accessibility standpoint – the text contained in the <a href> can add context.

You can see the final version of this demo, or follow along with the steps outlined here.

Creating the Button

A button is just a rectangular space with a link in it. We can create that with a very simple chunk of HTML:

  <a class="linear" href="http://getpersonas.com">
    <span>Get Personas for Firefox</span>
    <span class="info">It's free and installs in seconds</span>
  </a>

This creates a paragraph element and sets a fixed width. The internal “button” is actually a simple <a> link that contains text.

Once we have the width set on the button we need to force the <a> to act like a block element so that the text inside will flow as part of a single element instead of showing up as two distinct parts:

display: block;

We want to choose some nicer fonts and a nicer style:

font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 138.5%;
 
text-align: center;
text-decoration: none;

And add some padding around the text and set rounded corners:

padding: 10px;
-moz-border-radius: 10px;

We set a border around the button and set a background color as a fallback for other browsers. (Except, of course, for IE. See the note below.)

border: 1px solid #659635;
background: #99ca28;

We also want to set the color of the text and add a nice drop shadow to make the text look embossed onto the button:

text-shadow: -1px -1px 2px #777777;
color: #ffffff;

Once we have that we can use the -moz-linear-gradient CSS property to define the gradient so that it has a nice bevel look at the top:

background: -moz-linear-gradient(top, #CFE782 0%,
                                      #9BCB2A 2%,
                                      #5DA331 97%,
                                      #659635 100%);

The syntax here is pretty simple. The “top” means that it starts at the top of the area and heads down to the bottom of the button. The rest of the syntax defines what are called “color stops.” These allow you define gradient transitions that actually transition across more than two colors. This is used in this case because the bevel effect requires a non-linear transition from one color to the next.

In the syntax above, it defines a starting color (0%), an bevel effect (2%), most of the transition (97%) and the border color to finish (100%.) This creates the effect where it’s very light at the top as if there was a light source moving to a darker color near the bottom.

IE Note:

A pithy note about our good friend, Internet Explorer. While older versions of Firefox and Safari both handle the background: -moz-linear-gradient gracefully by not affecting background rendering when they run into a property they don’t know how to handle, IE just shows a white background. One possible work around for this is to include a later background: property for IE in a separate style sheet that’s loaded once this style sheet is loaded. There are probably other ways of handling this, but it’s worth noting that this is an issue.