Photoshop Tutorial: How to create a glossy web button

In this tutorial I am going to be showing you how to create a glossy looking web button like the one you see here.

Step 1: Make a new document 100 pixels wide by 50 pixels high.

Step 2: Set the foreground colour to the colour that you want. I will be using #066ceb for this tutorial but you can use any colour you want. Make sure the background colour is white.

Step 3: Use the elipse tool to draw an oval. This will be the shape of the button.

Step 4: From the layer menu select layer/layer style/inner glow and use these settings.

Step 5: From the layer menu select layer/layer style/inner shadow and use these settings.

Step 6: Use the type tool to add a text layer with the text that you want on your button.

Step 7: With the text layer selected select layer/layer style/bevel and emboss and use these settings.

Step 8: Duplicate the shape layer and drag it so that it's on top of the text layer. You should now have the text layer between the 2 shape layers like this.

Step 9: Change the fill of the top layer to 0% and the opacity to 25%

Step 10: Delete the background layer and your button should now look like this.

You now have the finished button and that takes us to the end of this tutorial.