Blend Candy – traditional "round glass" button

Today I quickly walk through creating the infamous “round glass” button.

Here’s the simple steps to create this

1. Firstly we create a circle with a green radial gradient. This will give the overall lighting effect

- Create a “circle” using the “ellipse” tool and holding down the “shift” key

- Next the “fill” of the circle to a “gradient brush”

- Set the type of the “gradient brush” to a “radial gradient”

- Set the left point of the gradient to “#FF63DF3F”

- Set the right point of the gradient to “#FF055B02″

- Using the “Brush transform” tool move the gradient down so that the light appears to emanate from the bottom of the circle

2. We next want to create the top reflection effect

- Create a plane white circle, again holding down the “shift” key. Make the circle roughly the same size as the original circle.

- Position the top of the new white circle just below the top of the green circle created in step 1

- Next change the circle to a “path” object by choosing “object > path > convert to path”

- Using the “direct selection tool” move the bottom point up to a position similar to that in the picture below. You will need to set the left and right dot’s curvature skew to get the desired result. [The curvature skew is the pointers that appear when you select the left or right dots. They let you control the curvature of the line directly connected to the dots]

- Next set the fill to a “gradient brush” of type “radial gradient”

- Set the left point of the gradient to a color of “#68FCFCFC” and an alpha of “41%”. Doing this will allow the images underneath this layer to “shine through”

- Set the right point of the gradient to a color of “#FFF8FCF8″

- Next set the overall opacity for this shape to “10%”

3. In the next few steps we create the bottom reflection.

- Create a white sphere roughly the same size as the main circle.

- Overlay it exactly over the main circle

- Convert it to a path “Object > path > convert to path”

- Move the top point half a centimeter above the bottom point. (as per image below)

4. Set the top pointer skew as per diagram below. This will give the desired curve for the top part of the reflection.

5. Set the left dot’s skew to positions shown in yellow below

6. Set the right dot’s skew to positions shown in yellow below

7. Set the bottom dot’s skew positions to those seen in yellow below.

8. There you have the traditional “circular reflective” button !

Source code can be found here!