Make a Vector Glass Button

In this tutorial we will make a vector glass button graphic using Adobe Illustrator CS4. The procedure is one I use regularly whilst creating interface components and icons. The end result is the top left button but with a little modification all these other variations are possible with the same procedure.

Create a rectangle with the Rectangle Tool

Use the Rectangle Tool (found on the tool bar). I made mine 150px wide and 30px high. The exact size can be entered in the Transform Palette. Choose a height that is divisible by 2 if you want the ends to be perfectly round. If creating the button for the web, keep all measurements in whole pixels and make your button at the final size it is going to be used at, the resulting artwork will be sharper.

Round the Corners

From the menu select Effects > Stylize > Round Corners... Enter a corner radius of 15 pixels (half the height of the rectangle) into Round Corners dialogue box and select Okay.

The round corners effect now needs to be expanded. From the menu select Object > Expand Appearance. The effect has now been converted to vector line work we can directly edit. Note more handles have appeared on the edge of the shape.

You could use the Rounded Rectangle Tool to create this shape but I like to set the box dimensions and preview the corner radius independently.

Add a gradient to the button

Use the Gradient Palette to apply a linear gradient to the button. Set the angle of the gradient to 90 degrees, the colour of the top edge to 60% black (#666666) and the bottom edge to 24% black (#C2C2C2).

Add an inner glow

From the menu select Effects > Stylise > Inner Glow... Here we are going to use a neat little trick to make the inner shadow. Adjust the settings to match mine. Using a dark color and setting the blending mode to multiply effectively makes the inner glow into an inner shadow!

Add a drop shadow

From the menu select Effects > Stylise > Drop Shadow... Follow my settings or adjust to suit your taste. Try to keep the shadow tone distinctly different from the edge of the button otherwise the button will appear to merge into the shadow and fail to have the desired effect.

Create the reflection overlay

From the menu select Object > Path > Offset Path... I've used a 2 pixel offset but if the button was smaller I would have made it only 1 pixel. Adjust the settings to match and click okay, now you have a smaller shape inside your button. Let's call this new element the 'reflection overlay' to avoid potential confusion.
Select only the reflection overlay, on the Appearance Palette you will see an inner glow and drop shadow effect are applied to this element. Remove these effects from the reflection overlay by deleting them from the Appearance Palette.

Crop the reflection overlay

Create a new rectangle and position it so it covers the bottom half of the reflection overlay. Select the reflection overlay and this new rectangle. Click the Minus Front button on the Pathfinder Palette. This removes the bottom half of the reflection overlay. If the expand button on the Pathfinder Palette click it to complete this step.

Refine the reflection overlay

With the reflection overlay still selected return to the Gradient Palette and adjust the setting so the gradient resembles reflected light on the button. Adobe Illustrator CS4 has an opacity feature on the Gradient Palette. Set both ends of the gradient to white (#FFFFFF) with the top edge opacity to 70% and the bottom edge opacity to 16%.

For those using an older version of Illustrator

The same effect can be achieved with a transparency mask (powerful but too complicated for this tutorial) or by setting the reflection overlay's transparency blending mode to screen. Set the gradient to light grey at the top (eg 46% black) and dark grey at the bottom (eg 88% black). On the Transparency Palette set the blending mode to screen. This achieves the same effect.

Finishing touches

I've dressed my button up with text that has a black drop shadow shifted up 1 pixel. This give the text a subtle inset appearance. Positioning symbols or text below the reflection overlay can make them appear embedded inside the button. Be sure to experiment with the procedure outlined in this tutorial, with a little imagination and modification along the way a wide variety of slick looking buttons can be produced quickly and easily.