See More

LIKE THIS?

Join CONVERTRICKS membership for more Tips & Tricks and Tools to help improve conversions while you learn about Convertri!

In the digital world, grabbing your audience’s attention is paramount. One effective way to do this is by using animated Call-to-Action (CTA) buttons. These buttons not only engage your visitors but also guide them towards taking the desired action, be it signing up for a newsletter, downloading a resource, or making a purchase.

​

In this post, we’ll walk you through a simple yet effective way to create animated CTA buttons using pure CSS. No JavaScript, no heavy libraries, just simple, lightweight CSS.

If you enjoyed this method do share feedback on Convertri facebook group or on IMXPERTS

Step-by-Step Guide to Implementing CSS Animated Buttons

Step 1: The CSS Code

The first step involves adding the CSS code to your webpage. This code defines the animations that will be applied to your buttons. I provide two animations to keep this lightweight: a rocking effect and a bouncing effect.

Copy below code and paste under Page > Custom Styles (Add your Custom CSS)

Tip: Triple-click on the code below and then press CTRL+C or Right-click to copy.

Step 2: Applying the Animations

Once you have the CSS code in place, the next step is to apply these animations to your buttons. This is done by adding the corresponding CSS class to your button element.

​

Select the button > Click on Element Properties > Click on General Properties > Add your chosen animation to CSS Classes field (at the extreme bottom) 

​

For instance, if you want to apply the rocking effect to a button, you will add the ct-RockerButton class to that button. Similarly, to apply the bouncing effect, you would add the ct-BouncyButton class.

.ct-RockerButton{animation:rocking 2s infinite;animation-timing-function:cubic-bezier(0,0,0.58,1);transition:.2s}@keyframes rocking{0%{transform:rotate(0deg)}25%{transform:rotate(0deg)}50%{transform:rotate(2deg)}75%{transform:rotate(-2deg)}100%{transform:rotate(0deg)}}.ct-RockerButton:hover{animation:none!important}.ct-BouncyButton{animation:bounce 1.5s infinite;animation-timing-function:ease-in;transition:.2s}.ct-BouncyButton:hover{animation:none!important}@keyframes bounce{15%{transform:translateY(0);box-shadow:0 0 0 0 rgba(0,0,0,0)}35%{transform:translateY(-35%);box-shadow:0 8px 5px -5px rgba(0,0,0,0.25)}45%{transform:translateY(0%);box-shadow:0 0 0 0 rgba(0,0,0,0)}55%{transform:translateY(-20%);box-shadow:0 5px 4px -4px rgba(0,0,0,0.25)}70%{transform:translateY(0%);box-shadow:0 0 0 0 rgba(0,0,0,0)}80%{transform:translateY(-10%);box-shadow:0 4px 3px -3px rgba(0,0,0,0.25)}90%{transform:translateY(0%);box-shadow:0 0 0 0 rgba(0,0,0,0)}95%{transform:translateY(-2%);box-shadow:0 2px 3px -3px rgba(0,0,0,0.25)}99%{transform:translateY(0%);box-shadow:0 0 0 0 rgba(0,0,0,0)}100%{transform:translateY(0);box-shadow:0 0 0 0 rgba(0,0,0,0)}}

And that’s it! With just a few lines of CSS, you can create engaging, animated CTA buttons that can significantly improve your website’s user experience and conversion rates.

Remember, the key to effective CTAs is not just about making them stand out, but also ensuring they provide value to your visitors. So, always pair your animated buttons with compelling, action-oriented text that clearly communicates what the user can expect after clicking the button.

Happy designing with Convertri!