This tutorial gives a quick overview into how to set up the visual appearance of an "aqua" or "gelcap" button, made popular by Apple's Mac OS X, using Scalable Vector Graphics in just 5 simple steps. The code in these pages has been tested in Firefox 3, Safari 3.1.1, Opera 9.5, Chrome 0.4 and Internet Explorer 6 with Adobe SVG Viewer 3.03.

What Is An Aqua Button?

First, let us define what we're trying to achieve. I took the liberty of taking some screenshots of a typical button in OS X (actually it's a Firefox 3 button in OSX). Below are screenshots of the button and its three possible states:

Unfocused Aqua Button

Focused Aqua Button

Selected Aqua Button

Analyzing Visually

The first thing that I do when trying to understand a visual effect is isolate and magnify the effect to understand the different individual components that make up the whole effect. Here's a close-up on the selected aqua button:

Upon magnifying the button, we can make the following observations:

1. The button's shape is a rounded rectangle.
2. The underlying fill of the rectangle is a vertical gradient where the top half is blue and then gradually transitions to a light blue/cyan at the bottom.
3. There is a white, transparent highlight on the top third of the button in the same shape as the button.
4. The text is black and on top of everything.
5. There is a grey drop shadow offset a few pixels in the y direction

We will deal with each of these components one-by-one.

1. The Button Shape

First, we create a simple rectangle element (see source):

Next, we round the rectangle's corners using the rx and ry attributes (see source):

2. The Button Fill

Now we move on to trying to capture the gradient's properties. You can either eyeball this or use some eye-dropper tool in an image editor application. I chose to eyeball it and came up with a simple linear gradient fill (see source):

3. The Button Highlight

This next step is a little more complicated. What we want is a highlight that matches the shape of the upper half of the button, but is slightly smaller.

I chose to accomplish this by first turning the button into a shape that I can reference via the use element (see source). This brings up one of my little pet-peeves regarding the SVG spec: You must use the url(...) format for fill attributes (because color values can contain #s in them), but you cannot use this format for xlink:href attributes... Live and learn.

Once we have the pill shape reference-able, we can compose the highlight. We use the same pill shape as the button, but we subtly transform it. I played around with the scaling and transformation values until it looked right.

When scaling shapes, I find it helpful to think of how I first need to center the shape at the origin (0,0), then scale it, then translate the shape back to its original position. Once I have these steps in my head, I write them, from right-to-left in the transform attribute:

• Move rectangle's center to the original by translating half its width and height in the negative direction: translate(-50,-12.5)
• Scale it down: scale(sx,sy)
• Move the rectangle back to its position: translate(50,12.5)

Once I have these in the proper order in the transform attribute, I then start playing with the values of sx, sy and the final translation until it looks correct.

Finally, we fill the new rectangle shape with a different vertical gradient. This new gradient goes from partially transparent at the top to abruptly transparent around the halfway mark. See source:

4. The Button Text

We're pretty close now. Once the button has some text on it, we'll be pretty happy. We simply add a text element to the image, making sure its text-align property is set to "center". We chose a decent sans-serif font family (Lucide Sans Unicode / Lucida Grande). I manually tweaked the y attribute until the text looked vertically centered. See source:

5. The Drop-Shadow

Now for a little eye candy. A cheaper drop-shadow is achievable without filters, but if we're trying to emulate the stylish look of OSX, we might as well go all the way. This picture, from a separate tutorial I wrote a couple years back, gives a pretty decent run-down, if I do say so myself, of how drop shadows can be achieved using SVG filters. Basically a blur of the alpha channel, an offset in the y-direction, then a blend with the original source graphic. The filter works in Opera 9+, Firefox 3+ and Adobe SVG Viewer 3.03. See source:

Conclusion

Hey, compared to the original, we didn't do too bad:

However, despite outward appearances, there's still a lot of work left for this button. We need to skin it, we need to add some behaviors, and we need some way to make this button a reusable component on a wide variety of web browsers. For now, at least, I hope this tutorial serves as a starting point in your own experiments with visual effects in SVG.