Free Call To Action Buttons For Your Website
The difference between a functional landing page and a non functional landing page can be as simple as having a call-to-action graphic and not. Your users should have instruction on what to do next, and the implementation of a call-to-action graphic can monitor the page’s success as well as direct users to contacting you, downloading a free product or simply exchanging their information for something that you are offering. We’ve put together some free call to action graphics for you to use on your own website.
Common Call To Action Buttons
To use one of these images on your website, simply right click the image, and select “Save Image As…” Save it onto your computer then re-upload it to your site and add your link!
Learn More Buttons:
Contact Us Buttons:
To use one of these images on your website, simply right click the image, and select “Save Image As…” Save it onto your computer then re-upload it to your site and add your link!
Sign Up Buttons
To use one of these images on your website, simply right click the image, and select “Save Image As…” Save it onto your computer then re-upload it to your site and add your link!
Editable Widgets
To implement one of our templates, simply scroll down this page to the template that you like, select the code displaying below it, paste it into your html editor on your website, and replace the highlighted text in the example below with the proper information.
Your Call To Action
This is your call to action statement. This should be a persuasive arguement as to why a user would want to click this button.
THE CODE:
1 2 3 4 5 6 7 8 9 10 11 12 |
<div style="background: url('http://www.designandpromote.com/wp-content/uploads/2012/09/green-cta.png') repeat scroll 0% 0% transparent; padding: 10px; width: 579px; height: 166px; color: #efefef; font-family: Arial,Helvetica,sans-serif; font-size: 12px ! important;">
<span style="font: 40pt Arial; color: #ffffff; text-shadow: 0px 1px 0px #cccccc, 0px 2px 0px #c9c9c9, 0px 3px 0px #bbbbbb, 0px 4px 0px #b9b9b9, 0px 5px 0px #aaaaaa, 0px 6px 1px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 3px 5px rgba(0, 0, 0, 0.2), 0px 5px 10px rgba(0, 0, 0, 0.25), 0px 10px 10px rgba(0, 0, 0, 0.2), 0px 20px 20px rgba(0, 0, 0, 0.15); margin-left: 10px;">Your Call To Action</span>
<div style="margin-left: 10px;">
This is your call to action statement. This should be a persuasive arguement as to why a user would want to click this button.
</div>
<div style="float: right; background: url('http://www.designandpromote.com/wp-content/uploads/2012/09/cta-small-blue.png') repeat scroll 0% 0% transparent; width: 234px; height: 45px; margin-right: 20px; font-size: 16px ! important;">
<div style="padding: 13px 20px; text-align: center;"><a style="text-decoration: none; color: #ffffff;" href="YOURLINKHERE">YOUR BUTTON TEXT</a></div>
</div>
</div>
|
BLUE
Your Call To Action
This is your call to action statement. This should be a persuasive arguement as to why a user would want to click this button.
THE CODE:
1 2 3 4 5 6 7 8 9 10 11 12 |
<div style="background: url('http://www.designandpromote.com/wp-content/uploads/2012/09/blue-cta.png') repeat scroll 0% 0% transparent; padding: 10px; width: 579px; height: 166px; color: #efefef; font-family: Arial,Helvetica,sans-serif; font-size: 12px ! important;">
<span style="font: 40pt Arial; color: #ffffff; text-shadow: 0px 1px 0px #cccccc, 0px 2px 0px #c9c9c9, 0px 3px 0px #bbbbbb, 0px 4px 0px #b9b9b9, 0px 5px 0px #aaaaaa, 0px 6px 1px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 3px 5px rgba(0, 0, 0, 0.2), 0px 5px 10px rgba(0, 0, 0, 0.25), 0px 10px 10px rgba(0, 0, 0, 0.2), 0px 20px 20px rgba(0, 0, 0, 0.15); margin-left: 10px;">Your Call To Action</span>
<div style="margin-left: 10px;">
This is your call to action statement. This should be a persuasive arguement as to why a user would want to click this button.
</div>
<div style="float: right; background: url('http://www.designandpromote.com/wp-content/uploads/2012/09/cta-small-blue-a.png') repeat scroll 0% 0% transparent; width: 234px; height: 45px; margin-right: 20px; font-size: 16px ! important;">
<div style="padding: 13px 20px; text-align: center;"><a style="text-decoration: none; color: #ffffff;" href="YOURLINKHERE">YOUR BUTTON TEXT</a></div>
</div>
</div>
|
Dark BLUE
Your Call To Action
This is your call to action statement. This should be a persuasive arguement as to why a user would want to click this button.
THE CODE:
1 2 3 4 5 6 7 8 9 10 11 12 |
<div style="background: url('http://www.designandpromote.com/wp-content/uploads/2012/09/cta-dark-blue.png') repeat scroll 0% 0% transparent; padding: 10px; width: 579px; height: 166px; color: #efefef; font-family: Arial,Helvetica,sans-serif; font-size: 12px ! important;">
<span style="font: 40pt Arial; color: #ffffff; text-shadow: 0px 1px 0px #cccccc, 0px 2px 0px #c9c9c9, 0px 3px 0px #bbbbbb, 0px 4px 0px #b9b9b9, 0px 5px 0px #aaaaaa, 0px 6px 1px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 3px 5px rgba(0, 0, 0, 0.2), 0px 5px 10px rgba(0, 0, 0, 0.25), 0px 10px 10px rgba(0, 0, 0, 0.2), 0px 20px 20px rgba(0, 0, 0, 0.15); margin-left: 10px;">Your Call To Action</span>
<div style="margin-left: 10px;">
This is your call to action statement. This should be a persuasive arguement as to why a user would want to click this button.
</div>
<div style="float: right; background: url('http://www.designandpromote.com/wp-content/uploads/2012/09/cta-small-blue-a.png') repeat scroll 0% 0% transparent; width: 234px; height: 45px; margin-right: 20px; font-size: 16px ! important;">
<div style="padding: 13px 20px; text-align: center;"><a style="text-decoration: none; color: #ffffff;" href="YOURLINKHERE">YOUR BUTTON TEXT</a></div>
</div>
</div>
|
RED
Your Call To Action
This is your call to action statement. This should be a persuasive arguement as to why a user would want to click this button.
THE CODE:
1 2 3 4 5 6 7 8 9 10 11 12 |
<div style="background: url('http://www.designandpromote.com/wp-content/uploads/2012/09/red-cta.png') repeat scroll 0% 0% transparent; padding: 10px; width: 579px; height: 166px; color: #efefef; font-family: Arial,Helvetica,sans-serif; font-size: 12px ! important;">
<span style="font: 40pt Arial; color: #ffffff; text-shadow: 0px 1px 0px #cccccc, 0px 2px 0px #c9c9c9, 0px 3px 0px #bbbbbb, 0px 4px 0px #b9b9b9, 0px 5px 0px #aaaaaa, 0px 6px 1px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 3px 5px rgba(0, 0, 0, 0.2), 0px 5px 10px rgba(0, 0, 0, 0.25), 0px 10px 10px rgba(0, 0, 0, 0.2), 0px 20px 20px rgba(0, 0, 0, 0.15); margin-left: 10px;">Your Call To Action</span>
<div style="margin-left: 10px;">
This is your call to action statement. This should be a persuasive arguement as to why a user would want to click this button.
</div>
<div style="float: right; background: url('http://www.designandpromote.com/wp-content/uploads/2012/09/small-cta-orange.png') repeat scroll 0% 0% transparent; width: 234px; height: 45px; margin-right: 20px; font-size: 16px ! important;">
<div style="padding: 13px 20px; text-align: center;"><a style="text-decoration: none; color: #ffffff;" href="YOURLINKHERE">YOUR BUTTON TEXT</a></div>
</div>
</div>
|
Black Box
Your Call To Action
This is your call to action statement. This should be a persuasive arguement as to why a user would want to click this button.
THE CODE:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div style="background: url('http://www.designandpromote.com/wp-content/uploads/2012/09/black-cta.png') no-repeat scroll 0% 0% transparent; padding: 10px; width: 384px; height: 207px; color: #efefef; font-family: Arial,Helvetica,sans-serif; font-size: 12px ! important;">
<span style="font: 30pt Arial; color: #ffffff; text-shadow: 0px 1px 0px #cccccc, 0px 2px 0px #c9c9c9, 0px 3px 0px #bbbbbb, 0px 4px 0px #b9b9b9, 0px 5px 0px #aaaaaa, 0px 6px 1px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 3px 5px rgba(0, 0, 0, 0.2), 0px 5px 10px rgba(0, 0, 0, 0.25), 0px 10px 10px rgba(0, 0, 0, 0.2), 0px 20px 20px rgba(0, 0, 0, 0.15); margin-left: 10px;">Your Call To Action</span>
<div style="float: left; background: url('http://www.designandpromote.com/wp-content/uploads/2012/09/black-cta-corner.png') no-repeat scroll 0% 0% transparent; width: 172px; height: 65px; margin-left: -10px; margin-top: 50px;">
<div style="padding-top: 20px; padding-left: 20px; font-size: 20px;">Your Call Out</div>
</div>
<div style="float: right; width: 191px; margin-right: 20px;">
This is your call to action statement. This should be a persuasive arguement as to why a user would want to click this button.
<div style="float: right; background: url('http://www.designandpromote.com/wp-content/uploads/2012/09/black-cta-button.png') no-repeat scroll 0% 0% transparent; width: 171px; height: 39px; font-size: 12px ! important;">
<div style="padding: 10px; text-align: center;"><a style="text-decoration: none; color: #ffffff;" href="YOURLINKHERE">YOUR BUTTON TEXT</a></div>
</div>
</div>
</div>
|
This post was written by Bruce Jones
