Step one - Open Photoshop
To start the creation of your glossy button, you have to create a new document, go to File> New (Ctrl/Cmd + N) and: edit the name (Glossy button in my example), change the canvas with (180px) and height (45px).
Step two - Create some guides
To help you to do the button, you should add some guides on your canvas! But before to add them you must turn the rulers on, so, go to the menu View> Rulers (Ctrl/Cmd + R to turn on and off). You'll create 4 different guides: on the top, on the right, on the left and on the bottom.
How to create a guide on Photoshop?
Really easy, for example, to create a vertical guide on the left of your canvas, click on the left ruler and drop it on the left border! Then, you can move it (every time) click on the guide with the Move tool (V) and move it where you want!
Step three - Create the main shape
Select the Rounded Rectangle Tool (U) and look at the options bar on the top of your screen. Verify that the first icon is activate (Sharpe Layer) and to finish, edit the radius to 40px.
Now you can create a rounded rectangle. If your foreground colour is black, your shape will be black, the foreground colour is important because it defines the style of your button. But don't worry, it's really easy to edit this colour, double-click on the shape layer "Shape 1" to change the colour.
In this example I use a darkgrey : #292929.
Step four - First reflect
Create a news layer and name it "First reflect" (to create a new layer go to Layer> New> Layer or Ctrl/Cmd + Shift + N). Then create a selection around the shape button (Ctrl/Cmd + click on the layer shape 1's thumbnail (in the layer panel).
Now you have to modify the selection, go to Selection> Modify> Contract (by 1px) and click on Ok.
Change the foreground colour to the white and select the Paint Bucket Tool (G). Go to Edit> Fill (Shift + F5).
Select the Rectangular marquee tool (M) and create a selection around the half bottom. Then delete the pixels (Delete).
To finish the reflect, go to Layer> Layer Mask> Reveal All. Select the Gradient Tool (G) and in the options bar, open the gradient picker and choice the second thumbnail (Foreground to transparent). Change the colour of the foreground to the Black and create a new gradient on the Layer mask.
Step five - Little stroke
Hide the guides (Cltr/Cmd + 
and
create a new layer, name it "White stroke" (to create a new layer go to
Layer> New> Layer or Ctrl/Cmd + Shift + N). And do once more time step 4
...
"create a selection around the shape button (Ctrl/Cmd + click on the shape layer one's thumbnail (in the layer panel)... Now you have to modify the selection, go to Selection> Modify> Contract (by 1px) and click on Ok... Change the foreground colour to the white and select the Paint Bucket Tool (G). Go to Edit> Fill (Shift + F5)"
Get down the selection of 1px. And delete the pixels (Delete).
To finish, add a new Layer mask on "White stroke" and with the Gradient tool (G) create a gradient on the half top part.
Step six - Last gradient
Create a news layer and name it "Last gradient" (to create a new layer go to Layer> New> Layer or Ctrl/Cmd + Shift + N). For the third time create a selection around the shape button, contract it by 1px, change the foreground colour to the white, select the gradient tool (G) (Foreground to transparent) and create a smooth gradient on the half bottom part. Press Ctrl/Cmd + D to deselect.
Great ! the button is still finished 
Step seven - Drop shadow
To finish the button it's easy; you must add a drop shadow on the layer "shape 1" but after that, you have to increase the height of your canvas (add 3 pixels => height will be 48pixels // Ctrl/Cmd + Alt + C or go to Image> Canvas size). Then click on the layer "shape 1" and go to Layer> Layer style> Drop shadow.
Edit the options like that:
Step eight - create the text
Select the tool Text (T) and create a new rectangular text area from the left to the right, in the options bar, click on the centre text icon. Then type your text (Sign-up Now!).
To finish the text, add a new layer style, go to Layer> Layer style> Stroke. Change the size to 1px, the colour to the black.
Step nine - duplicate the button
Finally you must duplicate the button to make the hover button. Create a new group and name it "Button" (go to Layer> New> Goup). When the group is created, move all layer into the group.
Rename a layer or a group ?
To rename a layer or a group in Photoshop, double click on its name to edit it. It's easy!
Now, you have to increase the canvas size again, go to Image> Canvas size and change the height to 96 pixels (48*2=96).
Right click on the group and select Duplicate group (edit the name like "Button hover").
Step ten - Change the color
Use the Move tool (V) to get down the second button and double-click on the layer shape 1's thumbnail to edit the colour. You see it's easy, change the colour to change the style of your button. In this example I used the green : # 3d960c.
Look at the result:
And look at the same button with different colours.
Download the Free PSD
Click here to download the Photoshop .psd files
Reply