Photoshop Glossy Button Tutorial

This tutorial is on how to make buttons in Photoshop. With Photoshop it is easy to make glossy web buttons.

Buttons in Photoshop

You can make use of buttons on your website or Blog.

While this tutorial will only show you how to create a static button, you can with CSS and GIF, make animated web buttons. But this is a good starter.

Let’s briefly look at what you will learn in this glossy button Photoshop tutorial. First you create an Eclipse, and fill with a color.

Then, add Layer Style Effects like:

Color Overlay

Inner Glow

Outer Glow

Inner Shadow


Gradient Overlay

After that you have to decide what text, icon or symbol to place in the center of the button. You will also use the direct selection tool to add a color overlay style to the button. Change the color schemes by just changing the color of the original ellipse. Watch it on YouTube.

Watch the Video:

How to Make a Button in Photoshop

On to the tutorial:

How to make glossy buttons in Adobe Photoshop

Create a new document of 800px by 600px area. Make a new eclipse with color #22297e and change the eclipse size to 500px X 500px.

Go to layer’s style. Add a color overlay with white color and blend mode overlay then change the opacity to 20%.

Add inner glow with white color, 80% opacity and 75px size. Keep all other options unchanged.

Add outer glow with black color; Blend mode: Normal; Opacity: 40% and Size: 50px.

Add inner shadow with black color; Blend mode: Overlay; Opacity: 40%; Distance: 0px; Choke: 100% and Size: 4px.

Now duplicate the layer and clear the layer style on duplicated layer by right clicking and selecting clear layer style. Then change fill opacity to 0%. Add a stroke of 50px with white color and overlay blend mode. Change the opacity of stroke to 15%.

Now add the symbol of the button that you want. Keep the symbol with only white color. Then change the layer mode of the symbol to soft light.

Now make another copy of the eclipse layer and move it to the top of the stack. Edit the shape with direct selection tool like the image below. Add a color overlay with white color, blend mode to overlay and opacity to 20%.

Now go back to the layer style of the first eclipse and add a gradient overlay with the settings below:

Finally create a new layer top of all the layers and then make a selection of the eclipse and make a white radial gradient at the bottom of the eclipse. Change the blend mode to overlay.

Final Image:

You can also make this button with different color schemes by only changing the color of the first eclipse. Now you surely do not have any doubts about how to make a cool button in Photoshop. Check the colors below.

Share, Tweet, or give a thumbs up!

2 thoughts on “Photoshop Glossy Button Tutorial”

Leave a Comment

Your email address will not be published. Required fields are marked *