Creating a call to action button in Photoshop

Let's see how to make a button in Photoshop that makes you want to click on it - a call to action button. Use of this kind of buttons is important in modern day webdesign because you can direct visitors to certain content on your website. Let's check it out.

It’s my first Photoshop tutorial ever guys, but I tried to make everything clear. It’s actually very easy to make a button that cries out for attention and every web designer should know how to make or at least use one. I’ve chosen the red color for this button, but you can choose any color and it should still look cool.

1. Create a new file in Photoshop

I created a new document of 500 x 500 px size and a light gray background #dddddd.

2. Draw the button

Create a new layer and name it “Button”. Use Rounded rectangle tool to draw a vector shape for this button on this new layer, color is #f00000, radius is 5 px and Snap to pixels checked if you want to have clear lines.

3. Add gradient, inner-shadow and stroke

Right click on the “Button” layer and select Blending options.

• Let’s add stroke first: size 1 px, color #740202 and position outside.
• Add the gradient overlay and leave it from black to white just change the opacity to 14 % and blend mode to normal.
• Then add the inner-shadow: white color, blend mode normal, opacity 55%, angle 120 degrees, distance 1 px, size 0 px.
• And finally add the drop shadow: black, blend mode normal, opacity 55%, distance and size both 3 px.

4. Adding reflection part 1

Let’s add a new layer and name it “Reflection”. Now use the rectangle marquee tool to select the top half of the button (see picture).

Then use the Gradient tool with these settings: color white to transparent and radial.

5. Adding reflection part 2

Try to draw a gradient on the layer “Reflection” similar to the one in the picture below. You probably still have selected the top half so go to select > deselect.

Ok, it’s quite obvious that the reflection is well over the lines of the button so let’s fix that. Select the layer “Reflection” then hold down the Ctrl key and click on the vector mask of the layer “Button” (see picture).

Then go to select > inverse and hit the delete key. Go to select > deselect. Click on the “Reflection” layer and select the Soft light blending mode.

6. Adding text

Ok, the hardest part is over. Now, let’s add some text over the button (Photoshop will automatically create a new layer). Right click on the text layer and select blending options.

• Add a drop shadow effect with these settings: black color, blend mode multiply, opacity 55%, distance 1 px and size 0 px.
• And let’s add just a little detail – gradient overlay: blend mode normal, color from black to white, opacity 8%.

7. Done

If you followed my instructions carefully you should now have a button similar to this. If not and need any help, write it under the comments.

Download source files