Automatic call to action buttons

Call to Action ButtonsCall to Action buttons are generally graphical links that stand out on a website. These are to help the owner of the website entice users to click on the buttons to obtain a business goal. For example to sign up for a subscription or download a free trial. Anything that may produce a sale may be linked to a call to action button.

One way to create a call to action button is to create a link and span together. We then add a class name to the link which produces its styles. The text within the span is hidden. The reason why we have the text within the span is for users that have screen readers and cannot see the image.

<style> .call-to-action { background: url(images/call-to-action.jpg) no-repeat; display: block; float: left; height: 40px; margin: 0 15px 15px 0; text-decoration: none; width: 80px; } .call-to-action:hover { text-decoration: none; } .call-to-action span { visibility: hidden; } </style> <a class="call-to-action" href="sign-up.html"><span>Sign Up Now</span></a>

The major problem with the above call to action button is that our client may not be able to recreate the button correctly. Generally you can teach clients to add a class to a link, but asking them to create a span within the link is a little too much. We therefore have to change our CSS and use text-indent to hide our text within our call to action button.

<style> .call-to-action { background: url(images/call_to_action.jpg) no-repeat; display: block; float: left; height: 40px; margin: 0 15px 15px 0; text-decoration: none; text-indent: -999em; width: 80px; } .call-to-action:hover { text-decoration: none; } </style> <a class="call-to-action" href="sign-up.html">Sign Up Now</a>

So we have our call to action button and we teach our clients to add a class name to the button. But wouldn't it be better for the call to action button to be created automatically? We can use some nifty Jquery to achieve this goal.

$(document).find('a[href*=sign-up.html]').addClass('call-to-action');

The above code is good, it adds the call-to-action class to our call to action buttons, but there is a slight problem. We don't want this to work for all our links, just the ones our client creates. We should therefore target just our content area.

$('#content').find('a[href*=sign-up.html]').addClass('call-to-action');

That's looking better but one more fix can be made. We probably don't want our call-to-action class to be added when our links are within a list. This is because a list generally needs to look consistent and a graphical call to action button wouldn't be appropriate .

$('#content').find('a[href*=sign-up.html]').parent().not('li').children().addClass('call-to-action');

Our clients can now create links in their wysiwyg editor and automatically our graphical call to action buttons are created.