Increase Conversions by Making Call-to-Action Buttons More Visible with CSS

  • follow us in feedly
Published December 11, 2013 by Brad Knutson
Increase Conversions with CSS Animations for Buttons

I’ve never been a fan of websites with obnoxious pop-ups to increase conversion rates. More often than not, I ignore what’s actually in the pop-up, and just look for a way to close it as fast as possible. If I can’t close it in a second or less, I usually abandon the page.

I don’t think I’m alone. It’s pretty common these days for sites to try to increase subscriptions to their email list by having a modal pop-up show up on the screen after a pre-determined amount of time. The fact of the matter is, they do work, and they are proven to increase conversions.

The problem is, for some folks like you and me, they are extremely annoying and are a huge turn off. There has to be an alternative, that can improve conversion rates to our call-to-actions, without being to intrusive. I want to stick with Inbound Marketing and stay away from Interruption Marketing.

So, I got to thinking. How can we make our call-to-actions more visible without being as intrusive as a pop-up?

CSS provides us the answer.

Sign Up Now

The above button will play a CSS animation (or “keyframe” for those with a design or development background) every set interval (in this case 10 seconds). The animation is subtle, but it will catch the eye of the reader.

So how do we accomplish this effect with CSS?

There are two parts. First, we have to create the keyframe animation, then we call it for the button.

CSS Keyframe

@-webkit-keyframes cro-scale {
	0% { -webkit-transform: scale(1); }
	1% { -webkit-transform: scale(1.2); }
	3% { -webkit-transform: scale(0.8); }
	5% { -webkit-transform: scale(1.1); }
	7% { -webkit-transform: scale(0.9); }
	8% { -webkit-transform: scale(1.05); }
	10% { -webkit-transform: scale(1); }
	100% { -webkit-transform: scale(1); }
}
@-moz-keyframes cro-scale {
	0% { -moz-transform: scale(1); }
	1% { -moz-transform: scale(1.2); }
	3% { -moz-transform: scale(0.8); }
	5% { -moz-transform: scale(1.1); }
	7% { -moz-transform: scale(0.9); }
	8% { -moz-transform: scale(1.05); }
	10% { -moz-transform: scale(1); }
	100% { -moz-transform: scale(1); }
}
@keyframes cro-scale {
	0% { transform: scale(1); }
	1% { transform: scale(1.2); }
	3% { transform: scale(0.8); }
	5% { transform: scale(1.1); }
	7% { transform: scale(0.9); }
	8% { transform: scale(1.05); }
	10% { transform: scale(1); }
	100% { transform: scale(1); }
}

The three sets of keyframes is just for cross-browser compatibility. Each of the three keyframes should be the same.

In this animation, we’re getting all the animations done in the first 10%, and the next 90% has no animations. This might seem confusing now, but it will become clear in a moment. The CSS transform property is essentially just zooming in and out on the image.

Calling the CSS Animation

Next, we need to call the animation for the button class.

.cro-scale {
    -webkit-animation: cro-scale ease-in infinite;
    -moz-animation: cro-scale ease-in infinite;
    animation: cro-scale ease-in infinite;	
    -webkit-animation-duration:10s;
    -moz-animation-duration:10s;
    animation-duration:10s;
}

We’re calling the “cro-scale” animation (which we defined in the keyframe), setting the transition to “ease-in” and telling the animation to continue to infinity.

The second half of the CSS is telling each animation to last for ten seconds. This is where the keyframe percentages come into play. Because the animation portion of the keyframe is only for the first 10%, the animation will last for one second, then remain still for 9 seconds. The animation then repeats again and again to infinity.

You can change the animation length, or the keyframe properties to create whatever effect over whatever timeframe you want.

Here are a few more examples:

Changing Background Color

Sign Up Now
@-webkit-keyframes cro-bg {
	0% { background: #43b561; }
	2.5% { background: #33914d; }
	5% { background: #43b561; }
	7.5% { background: #33914d; }
	10% { background: #43b561; }
	100% { background: #43b561; }
}
@-moz-keyframes cro-bg {
	0% { background: #43b561; }
	2.5% { background: #33914d; }
	5% { background: #43b561; }
	7.5% { background: #33914d; }
	10% { background: #43b561; }
	100% { background: #43b561; }
}
@keyframes cro-bg {
	0% { background: #43b561; }
	2.5% { background: #33914d; }
	5% { background: #43b561; }
	7.5% { background: #33914d; }
	10% { background: #43b561; }
	100% { background: #43b561; }
}
.cro-bg {
	-webkit-animation: cro-bg ease-in infinite;
	-moz-animation: cro-bg ease-in infinite;
	animation: cro-bg ease-in infinite;	
    -webkit-animation-duration:10s;
    -moz-animation-duration:10s;
    animation-duration:10s;
}

Skewed Button

Sign Up Now
@-webkit-keyframes cro-skew {
	0% { -webkit-transform: skew(0deg,0deg); }
	3% { -webkit-transform: skew(10deg,10deg); }
	5% { -webkit-transform: skew(0deg,0deg); }
	7% { -webkit-transform: skew(-10deg,-10deg); }
	10% { -webkit-transform: skew(0deg,0deg); }
	100% { -webkit-transform: skew(0deg,0deg); }
}
@-moz-keyframes cro-skew {
	0% { -moz-transform: skew(0deg,0deg); }
	3% { -moz-transform: skew(10deg,10deg); }
	5% { -moz-transform: skew(0deg,0deg); }
	7% { -moz-transform: skew(-10deg,-10deg); }
	10% { -moz-transform: skew(0deg,0deg); }
	100% { -moz-transform: skew(0deg,0deg); }
}
@keyframes cro-skew {
	0% { transform: skew(0deg,0deg); }
	3% { transform: skew(10deg,10deg); }
	5% { transform: skew(0deg,0deg); }
	7% { transform: skew(-10deg,-10deg); }
	10% { transform: skew(0deg,0deg); }
	100% { transform: skew(0deg,0deg); }
}
.cro-skew {
	-webkit-animation: cro-skew ease-in infinite;
	-moz-animation: cro-skew ease-in infinite;
	animation: cro-skew ease-in infinite;	
    -webkit-animation-duration:10s;
    -moz-animation-duration:10s;
    animation-duration:10s;
}

Rotating / Shaking

Sign Up Now
@-webkit-keyframes cro-rotate {
	0% { -webkit-transform: rotate(0deg); }
	2% { -webkit-transform: rotate(8deg); }
	4% { -webkit-transform: rotate(-5deg); }
	6% { -webkit-transform: rotate(4deg); }
	8% { -webkit-transform: rotate(-2deg); }
	10% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(0deg); }
}
@-moz-keyframes cro-rotate {
	0% { -moz-transform: rotate(0deg); }
	2% { -moz-transform: rotate(8deg); }
	4% { -moz-transform: rotate(-5deg); }
	6% { -moz-transform: rotate(4deg); }
	8% { -moz-transform: rotate(-2deg); }
	10% { -moz-transform: rotate(0deg); }
	100% { -moz-transform: rotate(0deg); }
}
@keyframes cro-rotate {
	0% { transform: rotate(0deg); }
	2% { transform: rotate(8deg); }
	4% { transform: rotate(-5deg); }
	6% { transform: rotate(4deg); }
	8% { transform: rotate(-2deg); }
	10% { transform: rotate(0deg); }
	100% { transform: rotate(0deg); }
}
.cro-rotate {
	-webkit-animation: cro-rotate ease-in infinite;
	-moz-animation: cro-rotate ease-in infinite;
	animation: cro-rotate ease-in infinite;	
    -webkit-animation-duration:10s;
    -moz-animation-duration:10s;
    animation-duration:10s;
}

Sliding Back and Forth

Sign Up Now
@-webkit-keyframes cro-slide {
	0% { -webkit-transform: translate(0px); }
	2% { -webkit-transform: translate(10px); }
	4% { -webkit-transform: translate(-7px); }
	6% { -webkit-transform: translate(6px); }
	8% { -webkit-transform: translate(-3px); }
	10% { -webkit-transform: translate(0px); }
	100% { -webkit-transform: translate(0px); }
}
@-moz-keyframes cro-slide {
	0% { -moz-transform: translate(0px); }
	2% { -moz-transform: translate(10px); }
	4% { -moz-transform: translate(-7px); }
	6% { -moz-transform: translate(6px); }
	8% { -moz-transform: translate(-3px); }
	10% { -moz-transform: translate(0px); }
	100% { -moz-transform: translate(0px); }
}
@keyframes cro-slide {
	0% { transform: translate(0px); }
	2% { transform: translate(10px); }
	4% { transform: translate(-7px); }
	6% { transform: translate(6px); }
	8% { transform: translate(-3px); }
	10% { transform: translate(0px); }
	100% { transform: translate(0px); }
}
.cro-slide {
	-webkit-animation: cro-slide ease-in infinite;
	-moz-animation: cro-slide ease-in infinite;
	animation: cro-slide ease-in infinite;	
    -webkit-animation-duration:10s;
    -moz-animation-duration:10s;
    animation-duration:10s;
}

Those are just a few practical examples of subtle animations to add to call-to-action buttons to increase conversions. Can you think of another animation (or combination of animations) that would work better? Let me know in the comments below!

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">