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!

Get this delivered to your inbox!

It's quick, free, and painless.

Comments

  1. Nice work!

    Have you seen Twitter’s Bootstrap (http://twitter.github.com/bootstrap)?

    I am increasingly relying on it for prototyping web sites and applications.

  2. Excellent tutorial. I love hangin’ here. ;)

    Friendly suggestion – for your pre element, try this syntax in the CSS:

    overflow: auto;

    That will create a horizontal scroll bar and keep the code from overflowing. (And yes, I’m changing my tutorials to this too!)

    • Thanks, Martyn.

      Very good idea, I’m definitely doing that.

      I had to change the the first set of CSS to 3 separate lines after publishing, because it was running way over into the sidebar, but making it scroll will fix everything.

  3. Hi Daniel,

    This is exactly what I’ve been looking for-Thanks :). However, at the time of implementing the CAPTCHA I ran into an issue and decided to use your other samples for consistency sake on the Form and mailer file (send.php) for my site. I am running into an issue being that I have never dealt with PHP (btw testing on hosting server).
    For some reason I can’t connect the dots and here is where I am confused:
    The input class command is for the form to be able to send the info etc… ok good. However, that creates a send button automatically right?

    Then if I use the “green-button” which I know is only directing the user to the thanks page I get another send link there (no button thought) Css is updated and all. Here is the code I used just like you suggested:

    Send

    What am I missing here please?

    Thanks in advance,

    Lorena

  4. We are a group of volunteers and starting a new scheme in our community.
    Your site offered us with valuable info to work on. You have done a formidable job and our whole community will be thankful to
    you.

  5. Hello friends, its wonderful paragraph about tutoringand entirely explained, keep
    it up all the time.

  6. This is really interesting, You’re a very skilled blogger. I have joined your feed and look forward to seeking more of your fantastic post. Also, I’ve shared your site in my
    social networks!

Speak Your Mind

*