In this tutorial, we will be using a few of Photoshop’s vector based tools along with layer styles to create a button perfect for use on the web.
STEP 1: Open a new 80x24px Canvas in Photoshop.
STEP 2: Click on the Rounded Rectangle Tool (Hotkey: U). Change the Radius to 6px in the Rounded Rectangle Options Toolbar, and draw a rounded rectangle that stretches from the top left corner to the bottom right corner of the canvas.
STEP 3: Add text above your button by using the Type Tool (Hotkey: T), and center it on the canvas. I used a 14px Bold Arial font type.
STEP 4: Now we are going to use layer styles to style our button, starting with a Gradient Overlay. First, you need set your Foreground and Background colors to the colors that you would like to use in your Gradient. In my example, I am using #004b54 for my foreground color (a dark blue/green), which fades to #0f656f, a lighter shade of the same color.
STEP 5: Next, click on the layer with your Rounded Rectangle Shape (by default it will be named “Shape 1”). Then, click on the Layer Styles dropdown menu (located at the button of the Layers Palette), and select Gradient Overlay.
STEP 6: In the Gradient Overlay dialog box, change the Gradient to a Foreground to Background Gradient.
STEP 7: Still in the Layer Style Window, Click on “Stroke” tab and add a 1 pixel stroke to the inside of the button, using your Foreground Color as the Stroke Color.
STEP 8: Again, in the Layer Style window, click on the “Inner Shadow” tab, which we will be using to add a highlight to the button. Change the Angle to 90 degrees, the Distance to 4 pixels, the Choke to 0 pixels, and the Size to 10px. Press OK to save the Layer Styles and close the Layer Style window.
STEP 9: Now we will add a slight Drop Shadow to our Text to make it stand out a bit more. Click on the layer with your button text, and bring up the Layer Style window once again by clicking on Drop Shadow. Change the Distance to 1 pixel, Spread to 0%, and Size to 1 pixel, and press OK.
Your finished button should look like this – 
Tags: Lesson, Photoshop, Tutorial, Website button