Hopefully by now you know how to create great call-to-action (CTA) copy, where to place your CTAs on your website and how many CTAs to place on a single page. In addition to the content, design and placement, you also need to consider one additional factor that may increase the click-through-rate: the rollover effect.
A CTA usually consists of an image with a link—simple enough. The "rollover effect" says that when a user "hovers" over the image, there is a change to the image itself. Maybe it's a color, bold effect, lighting or saturation—sometimes it's even a completely different image.
The content and imagery should be enough to entice a user to read it, but there's something inherently satisfying when you roll over a link and see that it's clickable. Not everyone agrees animation will increase the click-through-rate (CTR), so don't update all of your CTAs at once. Consider it, instead, a new variable to test effectiveness of animation.
Kuno Clips: Learn how to create a CSS Sprite rollover effect using css and the HubSpot CTA Builder. Front-End Web Developer, Maddie Weber explains in this short video!
Yes, it's possible. Yes, you should try it. Perhaps you've been A/B testing colors or 'click here' vs. 'download' for a few months now, take the opportunity to branch out from just words or color testing and try 'download' vs 'download' with a rollover effect, and test if it increases the CTR of your visitors in any noticeable way.
Because you're covering the actual CTA image with a background image, make sure that you're displaying the proper background image for the proper variation. The click-throughs will count for whichever CTA image is actually under the rollover effect, regardless of the background image you are displaying.
The ability to create a rollover effect using CSS sprites is not new, but it's rare that we see customers use it in conjunction with the HubSpot CTA builder. The builder allows you to upload your image directly in to a CTA tracker and place that embed code directly on any page of your site.
The way to build a CSS sprite rollover effect involves assigning a class or ID to a hyperlink surrounding an image and then applying a background attribute in your CSS with a determined width and height. The only difference in using the HubSpot CTA builder is the hyperlink IDs are already assigned.
Once you are ready to implement the on-state effect when you hover over the CTA, you can borrow the code below.
Remember, the goal is not to confuse your potential lead—your goal is get them to convert. Keep that in mind when choosing your animation effect.
Who says old dogs can't learn new tricks? List some of your favorite CSS tricks below!
Photo credit: Aphidoidea
Maddie Weber is a Web Developer for Kuno Creative. She truly enjoys being creative, drinking lattes, focusing on user experience for website design and development, and writing haikus. You can connect with her on Twitter.
