Call to action buttons are very important design elements for websites who offers products or services. The main purpose of call to action button is to attract visitor’s eye with important information that leads to the useful result (most popular buttons are "Sign Up Now”, "Download Now”, "Buy This Now” etc.) that requires user to take an action. Call to action button should be very attractive and grab a visitor’s attention very quickly. When designing effective call to action buttons you should consider choosing right color, location, size and free space around the button. Effective button must be outstanding and captivating to attract your potential clients.

Here you will see 30 well designed and effective call to action buttons examples and quick tutorial on how to create your own call to action button. Hope you will find this showcase useful and inspirational.

1. Elegant Themes

2. Volusion

3. Mozilla Firefox

4. Wijimo

5. Date My Mate

6. Concentrate

7. Picto Foundry

8. Think Unstuck

9. Ideaware

10. Shiri Design Studio

11. Sit Down Photo Booth Rental

12. Dandy Frog

13. Tweetie

14. Senzoo

15. Launchlist Pro

16. Meme

17. Bike Nation

18. Capo

19. Bloomfire

20. CodeCanyon

21. Greater Dunnellon Historical Society

22. Transmissions

23. Basecamp

24. Band Themer

25. MailChimp

26. Carbonmade

27. TheCommentor

28. Realmac Software

29. Denote

30. WeGraphics

Call to Action Button Tutorial

Source File

To download the source file, you must be a member of the Web Design Fan Club. Joining the Web Design Fan Club grants you access to all the incredible resources and knowledge you need to become an expert web designer. Read more about our club here.
  call-to-action-button.zip (100 KB)

Tutorial Resources

Fonts: Bebas Neue and Georgia

Preview

Step 1: Create a new document

Start by creating a new document CTRL+N. Then make the document 590 px by 260 px with a white background.

Step 2: Background

Click twice on locked "Background” layer and unlock it. After that set foreground color to dark grey (#333333) and fill (Alt+Backspace) your background with it. Then go to Filter > Noise >Add Noise… and set Amount to 1%, Distribution to Uniform and check Monochromatic if unchecked.

Step 3: Button

Create a new layer (Shift+Ctrl+N) and name it "Button”. Now change foreground color to white (#FFFFFF). Then pick Rounded Rectangle Tool (U) with 5 px of radius and draw a button. An example shown on the picture below.

Step 4: Button customization

Now click right mouse button on "Button” layer and select Blending Options… after that apply following options.

Now pick Ellipse Tool (U) and draw white ellipse as shown on the picture below.

Now click right mouse button on ellipse layer and select Rasterize Layer. Then hold Ctrl and click on "Button” layer thumbnail to make selection. After that click Shift+Ctrl+I and click on ellipse layer to make it active. Finally delete selected area.

Now reduce shape layer’s Opacity to 5%.

Step 5: Text

Now pick Horizontal Type Tool (T), choose 48 px size Bebas Neue font and write your message.

Click right mouse button on text layer and select Blending Options… after that apply following options.

Now pick  Horizontal Type Tool (T) again and choose 14 px Georgia (Italic) font. Then write more details about your offer.

Now click right mouse button on main text layer and select Copy Layer Style. After that click right mouse button on smaller text layer and select Paste Layer Style.

Congratulations! We’ve done. Did you understand all the steps? Do you like the final result? I would like to hear your thoughts.

You can get score highest marks in testking 352-001 using Testking 350-018 and cwna which are prepared by top certified professionals, ccnp & testking 70-643; both are marvelous in their nature.