Create a New Document. It can be any size.

Step 1

Select the rounded rectangle tool, radius: 5px, color:#1f1f1f and draw a rectangle in the middle of your canavas.

Right click on button layer>>blending options>>gradient overlay. Blend mode:normal, Opacity:100%, Style:linear, Angle90, Scale:54%.

Now double click on the gradient bar. Left Color:#1f1f1f, Right Color:#343434.

Step 2

Now were going to give our button a little of pop out technique. Ok so you know the first rectangle layer we’ve created, we are going to take that layer and duplicate it 2 times. After you have duplicated it 2 times you should now have 3 buttons in total. First Rectangle will be the gradient we’ve created in the beginning of this tutorial and the second 2 buttons will be changed from gradients to a 1 solid color.

Note: To change a layer from a gradient to 1 solid color all you would have to do is right click on the layer>>blending options>>and unselect the gradient overlay box. Then select the
color check box and change the color without making a new button over again.

First rectangle: Gradient
Middle Rectangle: #3D3D3D
Last Rectangle: #343434

Now that you have all 3 buttons made with the proper colors we will now make them them close to one another. Zoom in and select the move tool. Now drag the two layers close to the gradient layer. You should now see a little pop out. If you can not then it might be because of the white canvas.

Step 3

Now we will add our little gloss inside of the button. Select the rounded rectangle tool, color:#ffffff. Now draw a rectangle at the top of the button and change the opacity to 1%, and fill to 10%.

Step 4

Select the type tool color: #4b4b4b, font size:30px arial. Right click on the text layer>>blending options>>Inner shadow. blend mode: multiply, distance 0, choke: 0 , size: 5

Now select the color overlay check box and change the color to #333333.

Step 5

Select the type tool color: #4b4b4b, font size:12px arial. Right click on the text layer>>blending options>>Inner shadow. blend mode: mutiply, opacity: 75%, angle: 120, distance 5, choke: 0 , size: 5

Now select the color overlay check box and change the color to #ffffff. And you should now have a nice looking button.

Note: Click to Enlarge!

You can change the colors of these buttons very easy without creating new buttons. Just change the gradients and background colors and you will be good to go.

Note: Click to Enlarge!

Author: Marcell Purham

Hey there! My name is Marcell Purham and I am a 17 year old web developer/ designer from Chicago IL. When I'm not designing or coding things up I'm probably skateboarding, or gaming, or just being the average human. If you would like to stalk me just follow me @marcellpurham

Related Post

• Create an astonishing soccer desktop wallpaper using photoshop

• Create a nice clean blog Layout in photoshop

• Create a awsesome images gallery using css3 and jquery

• Highlight Current Page in an HTML Document Using Css

• Create a stunning Droid like mobile cell phone in photoshop

• 4 quick tips to help you create a better mockup/design in photoshop

• PSD to Wordpress Series Part 3: Final Tutorial

• Create a Retro Design Poster in Photoshop

Share