This is a web graphics tutorial for beginner level users of Illustrator. I am using Illustrator CS2.

A common way to give web buttons a little perspective and visual interest is to give them the look of a liquid filled bubble. It is a quick and easy process! For this tutorial, I am going to create matching red and green bubble buttons, which can be used for a number of actions on your web page: indicating a yes or no answer, start and stop audio, or play and pause video.

First, on a CMYK artboard, create two circles – one red and one green.

Next, place two smaller circles in the bottom half of your red and green circles. These shapes will serve as the highlight areas of the buttons, so make the fill color of these new circles a lighter shade of the same or similar color.

Now, select each set of circles individually and create a blend. To do this go to Object> Blend > Make.
(You can also do this using the blend tool from your toolbox.)

Once you have made your blend, your circle should look something like this:

Next, we need to add a reflection to create the illusion of a liquid texture and add some dimension to our buttons. Create an ellipse and place it inside each circle towards the top. Fill the ellipses with a white to black gradient, making sure that the black is true black (C=100%, M=100%, Y=100%, K=100%). (If you need help with creating a gradient, email me at kelly@rdesignonline.com.)

Now, open your transparency palette (Window > Transparency) and change your Transparency Mode to Screen in the pull down menu. Depending on your button colors, you may want to adjust your transparency % as well.

Once you have made the your changes in the Transparency Palette, your finished buttons should look something like this:

Now you can take your bubble buttons and label them for use on your website. Listed below are some sample uses of this pair of buttons. Enjoy!