Glass Effect Buttons

So the result will look if we are ready. Buttons with a glass effect.

Our canvas have a size of 200 has x 200 pixels and we choose a dark gray as background color. First we make a circle in the size 50 x 50 pixels and give him a deep red color (#660000).

After this we make another two circles, which is a little smaller (46 x 46 px) and give these a white color.

You give the red circle the following effect:

Drop shadow with the attitudes to be seen on the right

The result then looks so.

As next we give the first white circle one Linear gradient.

It then should, to see like in the picture on the right.

We still must adjust the color and the opacity now. On the left the color white and on the right the red color like the first circle (#660000). The opacity must be put on zero here now. Pushes to this over the color attitude, on the white button and the opacity from 100 on 0 regulates like in the picture on the right to see.

The result then looks so.

So the circle looks in the 300% view. Puts to see the gradient like in the picture on the right. Move the gradient with the mouse pointer.

We still move the two circles this, now so they are located on each other.

Copying the second white circle (Ctrl + C / Ctrl + V ). On better approval I have the other circle another color given.

Both circles like in the picture see on the right, put on top of each other.

Marking both circles and in the menu modify combine paths -- intersect.

The result will this be, the part, the two circles, lying about each other is left.

There is he! Putting the low-cut part on the red circle so that the red edge of the first circle still can be seen, moved to inside easily.

Give this circle the linear color gradient like the first one, with the same attitudes now, too.

In the view's 300% here once again. Has to be paid attention on this the gradient goes this from above to below this time. Simply moving with the mouse. It then should look on the right like in the picture.

You can mark all parts of the circle and group after this.

Now you can duplicate the button and move it horizontally.

We come to the end:

Make a rectangle with the rectangle tool in the size 1 x 1 px. Duplicate this rectangle and order to look on the right like in the picture.

Rectangle tool

Then simply grouping + duplicating this triangle. Giving the second rectangle the color white and moving by 1 pixel each (on the right and below).

So the circle looks in the 800% view.

Then only still grouping both parts and putting on the button.

So the ready buttons look. It remains which symbols leave to of course everybody put on the buttons themselves be.

As next make a rectangle with rounded corners in a dark gray (#696969). We give this rectangle a 2 px big frame in an even darker gray. We transfer this rectangle to the background.

You give the rectangle the following effect:

Inner Shadow with the attitudes to be seen on the right

and then

Inner Shadow with the attitudes to be seen on the right

We are at the end. The colors very simply can be varied. The color of the buttons also very simply can be changed. However, it is my recommendation to choose an a little darker one since otherwise the glass effect doesn't emerge so considerably.

Here you can download the sourcefile