Blog

Building beautiful cross-browser buttons with no images.

October 6th, 2011

There are many collective aspects of coding and design that yields a great website, but one of the quintessential features that has hung around over the years, is the common button. Whether being used for navigation, executing a command on the site, or for triggering an action on the page, a well-designed button can bring attention to important or key functions on the page. In the past, to create something this sufficiently eye-catching, you generally needed at least a basic level of graphics savvy, in the way of making an image to put on your page.

One of the drawbacks to this approach, of course, is that images are one of the chief offenders of increasing a sites total load times and overall file-size. There have been many improvements over the years in file compression techniques, and other bandwidth-saving methods, such as using image sprites. However, there is still nothing as small and efficient as a standard styled link. Until recently, this was the most flexible and lightweight, although not very attractive, means of creating a button on your site.

Thanks to the capabilities of the modern CSS3 library, however, we can now replicate all but the most detailed of images in pure CSS form using background gradients. Let’s take a look.

Creating a glossy button in pure CSS

Note: In this example, I’m using the Mozilla gradient syntax for the sake of simplicity. Webkit, Opera, and IE (8 and up) all have gradient support, but with slightly to greatly different syntax, which tends to be less succinct than the Mozilla markup.

First, let’s start with a basic button design in CSS, something along these lines:


#button {
display:block;
height:80px;
width:200px;
line-height:80px;
}

What this will yield is a plain, blue box-shaped button. While functional, we’re here to jazz things up a bit, so let’s start adding our CSS gradients.


#button {
display:block;
height:80px;
width:200px;
line-height:80px;
background: #6ba8e5;
background: -moz-linear-gradient(top, #b8e1fc 0%,
#a9d2f3 17%, #90bae4 36%, #90bcea 42%, #90bff0 48%,
#6ba8e5 49%, #9ad0ea 88%, #bdf3fd 100%);
}

Ok, we now have something that looks like this:

Much better right? Question is, how exactly did CSS manage to pull this off? Well, seeing as this is a linear gradient, all we are doing is declaring a background property with multiple color values. The value ‘top’ indicates where you want the point of origin for the gradient to be, and after that, you simply add in the colors with a percentile “stop” after each, indicating where inside the container you want the browser to cease rendering that color. You can add as many stops as you like to achieve the right effect. As you can see in the example above, you can get quite detailed with this.

Now, since it can be a bit tricky when trying to sort all those hexadecimal codes out, there are many tools out on the web to help you achieve the right look you were going for. In the example above, I used one of the default gradients from this tool made by the creators of the ever-popular ColorZilla

Of course, this button won’t look the same on ALL browsers all the time. IE7 and older will still render it as a solid color, which you will have to remember to add in your CSS as a fallback just in case. IE8 and up have a filter system that you can implement to achieve gradients, but it can be a bit difficult to work with sometimes. Regardless of these few instances though, you still wind up with a good looking, functional button that exhibits flexibility across browsers and layouts that it’s hard to duplicate with a static image.