Alright, with the Rounded Rectangle Tool let’s draw a shape in the center of our canvas. Set the corner radius to 30% or use the Aaron Beall’s fantastic Path panel and Fillet them to 10-20 pixels depending on how big you make your rectangle. I set mine to 14 pixels in the example below.
Make sure that your rounded rectangle is selected and take a look at the Properties Inspector. Change the Fill Category to Linear and then click on the color swatch right next to that drop down menu.
You should now see a gradient edit window. Set the first color (left) to a light grey (#CCCCCC) and then set the last color to white (#FFFFFF). Press Enter.
Now, choose the Pointer Tool and click on your rectangle to edit the gradient handles. Set them so that your image looks like my example below.
With your rectangle still selected, go to the Properties Inspector and click on the + icon in the Filters section. Choose Shadow and Glow | Inner Shadow, and set the options exactly like the screen shot below.
Your image should now look like my example below.
Choose the Pointer Tool again and click on your image if it isn’t already selected. Duplicate the object by pressing CTRL + C and then CTRL + V. Now go to the Properties Inspector and delete the Inner Shadow Effect or click on the + icon in the Filters section and choose None.
Next, go to Modify | Transform | Numeric Transform… (CTRL + Shift + T), and set the options as follows:
- Drop Down Menu = Scale
- Width = 90%
- Height = 90%
- Scale Attributes = Checked
- Constrain Proportions = Checked
With your newly drawn rectangle selected: choose the Subselection Tool, hold down the SHIFT key, and click on the 4 bottom-most anchor points.
Now press the Up Arrow on your keyboard until your image looks like my example below.
With the smaller rectangle still selected, go to the Properties Inspector and change the Fill category to Linear.
Click on the swatch next to the Fill category drop down menu to edit the gradient.
Set the first color(Left) to white(#FFFFFF) and set the last color(Right) to white (#FFFFFF).
Change the opacity of the last color(Right) to 0%. To change the opacity of a color on the gradient window, click on the swatch above the color that you would like to change. See my screen shot below.
Now, choose the Pointer Tool and modify the fill handles so that your image looks like my example below.
Now your image will look like my example below. In most cases this button will do fine as is but I will show you how to add a bit more depth to the image.
With the Pointer Tool, click on the larger rectangle to select it. Go to the Properties Inspector and click on the + icon in the Filters section. Choose Shadow and Glow | Drop Shadow.
Set your options exactly like the screen shot below.
Your image will not look like my example below.
To get even more authentic, add some Helvetica text right below the smaller rectangle layer. Add a slight drop shadow to the text and you will have a super realistic Aqua Style button.