This is a guest post from forum member, and very funny fellow CTRtard. If you don’t read his blog, you should start immediately. 

Aside from the headline, your landing page’s call to action (CTA) is one of the most important elements you should be testing.  Often times, the CTA is made in the form of a button that’s labeled “Click Here” or “Continue”.   Because buttons are graphical, changing them to test various colors, sizes and labels can be tedious.  Until now.

Today Is Your Lucky Day

After firing up Photoshop to resize yet another button, I decided to try and see if CSS alone could do the job.   After checking out a few tutorials here and there, this post seemed to almost have it right.  But IE didn’t seem to like this solution and I wasn’t entirely happy with how it looked/worked.  So here’s what I came up with…

This is a short and sweet little chunk of CSS to let you create tons of button variations for your landing pages faster and easier than ever before.  Check out the demo:

CSS Buttons Demo

The Code

This code uses CSS and a single image file.  The image file is there to give the buttons a subtle shading effect.   Other than that, this requires no images at all.  That means resizing, changing colors, or changing CTA’s can all be done with just a few keypresses!

How to Use

1. First paste all of this CSS code inside your <head> </head> tags:

[code lang=”css”]
<!– meta tag is needed for rounded corners on ie –>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />

<style>

body {
background-color:#ffffff;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

/* start of css button styles */
.button {
color: #fff;
text-decoration:none;
font-weight: bold;
padding: 5px 10px;
display: inline;
border-style:solid;
border-width:2px;
border-radius: 6px;
-o-border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
background-image: url(‘button-gradient.png’);
}
.button.small    { font-size:14px }
.button.medium   { font-size:18px; }
.button.large    { font-size:24px; }
.button.giant    { font-size:30px; }
.button.enormous { font-size:40px; }
.button.red     { background-color: #FF0000; border-color: #e50000; }
.button.purple  { background-color: #9400bf; border-color: #8200AA; }
.button.green   { background-color: #58aa00; border-color: #519900; }
.button.orange  { background-color: #FF6F02; border-color: #ED6402; }
.button.blue    { background-color: #2c6da0; border-color: #245982; }
.button.yellow  { background-color: #FFC300; border-color: #ED9F04; color: #000000 }
.button.black   { background-color: #333333; border-color: #000000; }
.button.white   { background-color: #FFFFFF; border-color: #8C8C8C; color: #000000; }
.button.bing    { background-color: #0044CC; border-color: #245982; }
.button:hover           { color:yellow; }
.button.red:hover       { background-color: #e50000; }
.button.purple:hover    { background-color: #8200AA; }
.button.green:hover     { background-color: #519900; }
.button.orange:hover    { background-color: #ED6402; }
.button.blue:hover      { background-color: #245982; }
.button.yellow:hover    { background-color: #ED9F04; }
.button.black:hover     { background-color: #000000; }
.button.white:hover     { background-color: #F7F7F7; color:#196DFF; }
.button.bing:hover      { background-color: #FFFFFF; border-color: #0044CC; color:#0044CC;}
.button:active { position: relative; top: 1px; }
/* end of css button styles */

</style>
[/code]

2. Next, upload the file “‘button-gradient.png” file into the same directory as your landing page.

3. Now you’re free to create buttons anywhere in the document by using this simple format:

[code lang=”css”]
<a href=’#’ class=’button red’>Click Here</a></pre>
<a href=’#’ class=’small button purple’>Click Here</a>
<a href=’#’ class=’medium button blue’>Click Here</a>
<a href=’#’ class=’giant button orange>Click Here</a>
<a href=’#’ class=’enormous button bing’>Click Here</a>
[/code]

Notice how the class name defines how the button will look.  Sweet!  Now you don’t have any more excuses to not test a ton of button variations. 😉

Download

You can download the zip file with the demo page and the image file here.  Just view the source to see how to make all the button combinations.

If you come up with any new color schemes, post a comment with your modifications!

That’s it!  Enjoy.

Share This Post...Share on FacebookTweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on StumbleUponBuffer this page