Today I’ll be learning you how to make a cool grey button in only 3 steps. Making things as easy as possible is always what we’re looking. Anyone who knows even a very little of Photoshop could do this tutorial in no time. You can use this in a fresh and maybe a little minimal webdesign. Read on and follow me through this short tutorial!

Step1

We start of by making a new document (Ctrl+N), or open (Ctrl+O) something your working on. Alright we can start creating our button for navigation or anything you like. I, for example, will be making a play button. Pick your Rounded Rectangle Tool and put the radius on 6px, and your front color on something dark grey for example #555555. If you’re planning to create navigation buttons you better keep the radius a little more low, like 3px.

Now create your button and choose which size you want, where you think you’ll text or icon will fit in. I’m going for a small one because a play icon doesn’t have to be that big. Owyeah, see that your pixels aren’t fooling around and that your sides of the button are sharp.

Step2

Put the white color in front and drag a rectangle over the button. Pres Ctrl+T (Edit > Free Transform) and put Reference Point Location on top, now type 50% in the height box. The white shape will be now half so high, so will be cutted in the middle of the button.

Get the Direct Selection Tool (A) and hit one of the sides of the white shape. Now pick up the Pen Tool (P) and hit the bottom side of the white rectangle in the middle. Now pick again the Direct Selection Tool and drag the Anchor point down.

For the Blending Options you put Fill Opacity, not the overall opacity, on 0%. Add a white to transparent Gradient Overlay with Blend Mode Soft Light and 45%. See that it’s Linear and 90° in Angle.

Step3

Add your text, icon or whatever you want to put in.

For the triangle you pick the Polygon Tool and but the number of sides on 3.
Pick a light grey color, for example #d6d6d6, and make your triangle holding shift and drag right which is very important. The way you drag is the way the corner will be at.

Put on a Gradient Overlay on the Blending Options. The Blend Mode of the gradient from black to white on Overlay and a 25% opacity. Also put on a 1 pixel black Stroke of 15% opacity.

And see, you’re already completely finished creating this pretty simple grey button.
This were my results.

For the navigation buttons I’ve putted a Drop Shadow on the background shapes. And also duplicated the text flipped it vertical and putted a mask with a gradient on for creating that ‘clean floor effect’.