Call To Action Buttons Graphics Giveaway

A good call to action is absolutely essential to a website’s success.

That’s the big, good-looking “Buy Now!” button you see on every commercial site’s home or product pages. Without one, you lose a potential sale or subscription. This button must be conspicuous. It also has to look awesome.

I’ve made some graphics that you can use for this. For free.

I’m also going to show you how to use them on your site.

If you want to take a look at them, here’s a live demo.

First, download the ZIP file here. Unzip it. (If you have a Mac, double-clicking on it will automatically do this. If you don’t, well, uh, you should. Just Google how to unzip it if you don’t know how.) In a folder called images you’ll find the graphics. Copy whichever images you’re using in with your website’s files. Open the page you would like to add it to with your favorite editor. Paste in this:

<p class="dark-red-button">
<a href="http://codechirps.com/">Subscribe</a>
</p>

You’ll then want to put in the proper link URL and text. Change class=”dark-red-button” depending on which graphics you’ll be using. Here’s the CSS for the dark-red-button:

.dark-red-button a {
        font-family: Arial;
	background: url(images/dark-red-sprite.png) repeat-x top left;
	color: #fff;
	text-decoration: none;
	font-size: 18px;
	padding: 11px 50px 11px 50px;
	text-shadow: #000 1px 1px 0px;
	border-radius: 8px;
}
.dark-red-button a:hover {
	background: url(images/dark-red-sprite.png) repeat-x;
	background-position: 0px -56px;
}

If you change .dark-red-button and the background graphic, this same CSS will work for dark-blue-button, grey-button, and black-button. The left and right padding is editable, completely up to your taste. The top and bottom shouldn’t be changed without changing the size or family of the font, size of the image, etc. If you want the edges to be rounded in Internet Explorer or older versions of other browsers, be sure and check out my post on that.

Since green-button, red-button, and blue-button are the full image with rounded corners (Not repeating on x. This was necessary since the border is a gradient made in Photoshop), the side padding must be adjusted depending on your text. Start with about 30px, and adjust to get it just right. For Arial at 18px, you can set the top and bottom padding both to 12px.

Feel free to make any changes to the CSS or graphics to suit your needs!

Enjoy!

In case you missed the links, here are some more:

Demo

Download

If you liked this, why not share it with your friends? I’d appreciate it!