Increase Your Click Through Rate by 200% with buttons!

“[Using] buttons, as opposed to text, provide upward of a 200 percent higher CTR (click through rate).”

What is the difference and how does it look?

Text CTA:

Click Here to Download

Button CTA:

Click Here to Download

I’m going to show you how you can easily start using buttons on your WordPress website or blog.

First, there is obviously a WordPress plugin, because there seems to be a plugin for everything, which is a good thing!

These are two of the plugins I found and liked

• MaxButtons (also available on WP.org)
• ET Shortcodes

I however, prefer to not use plugins and just add the style to my stylesheet and use a bit of HTML to display the button.

That’s what I’m going to show you below.

---

First step is to add the code below to your style.css file.

/* Call to Action Buttons
------------------------------------- */
a.button {
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    box-shadow: 0 1px 1px #eee;
    -moz-box-shadow: 0 1px 1px #eee;
    -webkit-box-shadow: 0 1px 1px #eee;
    display: inline-block;
    font-family: 'Oswald',arial,serif;	
    font-size: 13px;
    font-weight: normal;	
    line-height: 13px;
    margin: 0 5px 10px;
    padding: 8px 14px;
    text-decoration: none;
    text-shadow: 1px 1px #444;	
    text-transform: uppercase;	
}

a.button:hover {
     opacity: .8;
    -moz-transition:all .5s ease;	
    -o-transition:all .5s ease;	
    -webkit-transition:all .5s ease;
    transition:all .5s ease;
    text-shadow: 1px 1px #000;		
}

a.button.small {
    background-image: url(images/button-small-bg.png);
    font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;
    font-size: 13px;
    font-weight: bold;	
    line-height: 13px;
    padding: 10px 12px;
}

a.button.medium {
    background-image: url(images/button-medium-bg.png);
    font-size: 18px;
    line-height: 18px;
    padding: 12px 20px;
}

a.button.large {
    background-image: url(images/button-large-bg.png);
    font-size: 24px;
    line-height: 24px;
    padding: 16px 32px;
}

a.button.black {
	color: #fff !important;
	background-color: #000;
	border: 1px solid #000;
}

a.button.blue {
	color: #fff !important;
	background-color: #274d70;
	border: 1px solid #274d70;
}

a.button.green {
	color: #fff !important;
	background-color: #3d5302;
	border: 1px solid #3d5302;
}

a.button.orange {
	color: #fff !important;
	background-color: #b94f00;
	border: 1px solid #b94f00;
}

a.button.purple {
	color: #fff !important;
	background-color: #770777;
	border: 1px solid #770777;
}

a.button.red {
	color: #fff !important;
	background-color: #770000;
	border: 1px solid #a90505;
}

a.button.silver {
	color: #fff !important;
	background-color: #888;
	border: 1px solid #888;
}

.big_button_right {
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    background: #333;
    border: 1px solid #222;
    color: #fff !important;
    display: inline-block;
    float: right;
    font: 22px 'Oswald', arial, serif;
    margin-left: 20px;
    margin-right: 4px;	
    padding: 8px 10px;
    position: relative;
    text-decoration: none;
    text-shadow: 1px 1px #444;	
}

This style gives you three different button sizes;

Small
Medium
Large

And seven different colors (Black, Blue, Green, Orange, Purple, Red, Silver) which you can change to fit your needs.

---

Second step is to add the HTML to your link so the button style is displayed and not just a text link.

Below you’ll first see a standard HTML link, and the second, the HTML link with the piece that adds your button style.

< a href="https://example.com">Click Here to Download< /a>

< a href="https://example.com" class="button size color">Click Here to Download< /a>

NOTE: you’ll need to remove the space before the ‘a’ and before the ‘/’ in order for this code to work properly.

You change the size and color by replacing “size” and “color” with the appropriate name, as it is displayed in the stylesheet.

Have questions? Need help implementing this into your site? Use the comments below!