Create Clean and Fresh Call-to-Action Button + Embossing Text Effect in Photoshop

For those who haven’t yet came across the idea of “Call-to-Action” button – basically they’re buttons that you would want all your users to click on when they land on your page. Usually they’ll be a link to a download, signup or sale. By making those buttons easy to easy and click on, you increase the likelyhood that user will notice the button, then follow up with relevant actions.
As for embossing text, they’re everywhere now on the web, and I personally quite like this particular effect :)
Here is a preview of the final effect for this tutorial: (click to enlarge)

OK let’s get started!

Step 1

Create a new document size 750px * 400px (size doesn’t really matter here) and fill this background layer with White. Create a new layer on top of the background layer called “gradient”, grab the Gradient Tool from the toolbox and fill it as shown below:

I decide to use this light gradient because it’s easier to demonstrate several important points in the next few steps. You can of course try out darker ones.

Step 2

Let’s type some text on the canvas. I used this font because I personally feel it’s a very clean and bold font, which you can use for a wide range of headings, or descriptive text.
So type some sample text on the canvas as shown below: (use a slightly darker colour for font colour)

Appy the following layer blending option to the text layer:
Inner Shadow

Stroke

And you will have the following effect to the text layer:

See, that’s our embossing text effect done. Very simple, yet effective.

Step 3

Ok let’s get on with creating the call-to-action button. Use the Rounded Rectangular Tool with a 7px radius, draw a button on the canvas as shown below: (Make shape you select “shape layers” on top option bar)


Apply the following layer blending effect to this button:
Bevel and Emboss

Gradient Overlay

With the Gradient Colour, apply the following settings:
Location 0% – Color: #0083be
Location 99% – Color: #31c8fa
Location 100% – Color: #FFFFFF

Stroke

And you will have the following effect:

Step 4

Now we have a button background, let’s add some symbol onto it so it provides some kinds of graphical meaning. In this case, I decided to make this button a download button. So naturally I thought of a down arrow would mean something to the user.
So grab the Custom shape tool from the toolbox:

and choose the bold arrow from the library as shown below:

Draw an arrow on the position as shown below, rotate it clockwise 90 degree when you done the drawing:

Apply the following layer blending options to the arrow layer:
Drop Shadow

Gradient Overlay

Location 0% – Color: #09c228
Location 100% – Color: #b4ff97

Stroke

You will have the following effect so far:

Step 5

Now we can type some text onto the button:

Apply the following layer blending options to the text layer:
Inner Glow

Gradient Overlay

Stroke

and you will have the following effect:

Step 6

Ok we’re almost done. To spice up the final effect, we can add some light and shadow to the button and text to increase their depth. To do this, create a new layer underneath the button background layer, grab a big soft brush with a dark colour, do a single click on the centre of the canvas:

Use free transform tool to resize it and position it as shown below:

To create a light divider between the text and the button, simply create a new layer on top of the shadow layer, use a big soft brush with white colour, do a single click to the position as shown below:

Again we resize it and fit it to the postion under the text:

and here is the final effect for this tutorial:

Final Thoughts

There are several things I think we need to pay attention to when it comes to making call-to-action buttons:

1. Always try to use fresh, vibrant colour as button background, and make sure the color differs significantly from the rest.
2. Apply gradient to the background creating more depth and make the button stand out
3. Use graphic element and symbol on the button to make it more meaningful to visitors
4. Use Light and shadows to draw user attentions.