11 Step Tutorial To Create Crystal Buttons

It was sometime back when I was writing a tutorial to create crystal orbs at KalaaLog, that I realized the same technique can be extended to other elements - one of them being buttons that can be used in web design.

In this tutorial we will go through some simple (and few advanced) steps that would let you create a button for web pages with a crystal or glassy look to it.

I have used Inkscape myself, but I will try to be as generic as possible so that you may reproduce the results in other graphics utilities like PhotoShop, Adobe Illustrator, or Corel Photo Paint.

Step 1

Start with creating a basic shape, having the fill color as the base color you want the button to be and the stroke/outline to be a darker shade with 1-2 pixel width. You can choose the shape to be almost anything you wish, but you can start practicing with the rounded rectangle.

Step 2

Create a copy of the shape, and then switch off its outline. Choose a color that is of slightly different hue. I chose purple to balance the color with Red or Lilac, but you can also go with the cyan to balance it with green. Then make it a radial/spherical gradient that has almost the solid color on the center and transparent at the edges. (Note that it is not a gradient from solid color to white, but solid color to transparent).

Step 3

Move the new shape over the first and position it at absolute center.

Step 4

Now, use the font tool and write the text you want to appear on the button. You can keep the color black, or even try experimenting with lighter colors - even white.

Step 5

Create a copy of the first shape you started off with, switch off the outline, and make a linear gradient using a darker shade of the base color; the solid color should be at the bottom and should be transparent at the upper edge.

Step 6

Move the newly created gradient over the rest of them and position it exactly at the middle.

Step 7

Take another copy of the original shape and paste it beside the rest of them. Do not worry about the stroke and fill colors as we would be changing them at a later stage.

Step 8

Get another copy of the first shape and paste it over as shown above. They should be overlapping half way through each other. We will be using these two shapes to create the shape that gives the glassy effect to our button.

Step 9

Choose the two shapes, and then perform a union operation (or something that is similar in your graphics program). This should effectively retain only the shape that was overlapped and remove the rest of the non-overlapped parts of the shapes. Change its color to a very light shade of the original shapes fill color. Switch off the outline; we will not be needing that.

Step 10

Move the newly created shape over to the rest of the button. Place it in the middle horizontally, an at the edge of the top vertically. It should fit just within the outline of the original button shape. We are almost there. Proceed to the next step.

Step 11

Now change the transparency of the shape to about 50%. (You may need to experiment around a bit with this depending on the color you chose). This should give the glossy crystal effect to the button.

Save your work, and you are done!

Let me know about your experience on this if you found this tutorial useful.