We all know that call to action buttons are important design elements of many modern websites. The design helps to excite and engage visitors and encourage them to click. Here is a tutorial on how you can design a simple and effective call to action button in Photoshop. You can quickly learn how to design the button even if you don’t consider yourself very skilled in Photoshop.

Here is a preview of the final effect for this tutorial:

Ok let's get started

Step 1

Create a new document sized 640px x 350px and fill the background layer with #313842 colour. Next go to Filter > Noise > Add Noise and set the amount to 1%. Click OK.

Now add a new layer on top of the background layer and name it “light". Change colour to #637594 and select a big soft brush, set the size of the brush to 600px and opacity to 15%. Position it in the centre of the document and click once.

And you will have the following result:

Step 2

We have our background ready, now its time to start working on the actual button.

Now add a new layer and call it “base”, set the colour to #3a424e and Select the Round Rectangular Tool (U) and apply the following settings to it:

Draw a rectangular shape in the centre of the canvas.

On this shape layer, apply the following layer blending options:

Drop shadow:

Inner shadow:

Gradient overlay:

Stroke:

and you will have the following effect:

Step 3

ok, lets divide or button into two sections; left section for the text area and the right section for an arrow icon.

Add a new layer and call it “divider left”. Draw a vertical line from top to the bottom inside our button (position it on the right side to create a square right hand side section).

It should look like this:

apply the following layer blending options:

Gradient overlay:

Create another layer, name it “divider right” and draw identical line right next to the previous one (both lines need to be right next to each other)

Apply the following layer blending options:

Gradient overlay:

now we should have the following effect:

Step 4

ok, lets add the arrow icon.

Create a new layer and name it “arrow bg”. Change colour to #2a323d and select Eclipse Tool (U). While holding a shift key draw a circle in the middle of our right section.

You should end up with the following result:

Next, on this shape layer, apply the following blending options:

Inner shadow:

and you will have the following effect:

Create another layer on top of the previous one and name it “arrow”.Change colour to #424b59 and Select Polygon Tool (U). Apply the following settings to it:

Draw a triangle inside our circle

On this shape layer, apply the following layer blending options:

Drop Shadow:

Inner shadow:

and you will have the following effect:

Step 5

Now its time to add some text to our button. Select Horizontal Type Tool (T) and type some text. Font and colour choice are really up to you. The one used in our tutorial is Helvetica Neue Medium 24pt, colour #dbe3ef.

Next, apply the following blending option to the text:

Drop Shadow:

and you will have the following effect:

to add more text follow the last step. Of course you can play with the different font types and text colours.

Your final result should look more less like the one below:

That’s it for this tutorial! Hope you enjoy it, drop me a comment if you have any question, I will try my best to help you out.

Thank you and have a nice day!