How to Create a Pulsing CTA in Email to Drive Clicks

As email marketers, we strive to be at the top of our game, making improvements to our emails, our journeys and segments wherever we can. Recently, an email newsletter landed in my images-off inbox that had a pulsing CTA button. Naturally, this piqued my interest, so I set to work investigating the code so you can add a pulsing CTA to your emails too.

Below are three simple steps for you to recreate it.

Upon inspecting the email, I came across the CSS that pulls the strings to make the magic happen:

                            

                                .pulse {
width: 250px;
height: 40px;
background-color: #A2CD3A;
}
                            
                        

In the CSS above, I have the basic style of my button. I am calling my class “pulse” for this example. You can choose whatever name you would like in your code. However, I would recommend that you keep to some naming convention so that if someone else has to edit your code, it makes sense to them.

Before we start on the animation, here’s what the static button looks like so far:

Before any magic can happen, we have to set the scene. To do this, we define the animation name, duration and iteration count. If you are feeling a little fancy you can add timing functions, fill mode, direction and delay.

                            

                                .pulse {
animation-name: pulseKey;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
}
                            
                        

Similar to margin, padding and border style properties, the animation properties can shorten down to the following:

                            

                                animation: pulseKey 2s infinite ease-out;
                            
                        

There are various reasons to minify your code. The main one that springs to mind is to avoid Gmail’s message clipping. This usually occurs when an HTML file exceeds 102KB as it reaches the inbox. So, there are benefits to keeping your code light.

Here is where the magic happens. There is a CSS rule available for us to create animations called keyframes, defined in CSS as @keyframes. Those of you who have dabbled with animation such as animated GIFs, Adobe AfterEffects and Blender, etc. will be familiar with keyframes.

In the previous step, we set the scene by giving our animation a name and defining its properties. This allows us to pair the animation properties with the @keyframes rule. Once we define the animation within the @keyframes rule, we can edit CSS properties at key points to create our animation.

                            

                                @keyframes pulseKey {
0% {
height: 40px;
width: 250px;
font-size: 1rem;
}
25% {
height: 60px;
width: 270px;
font-size: 1.5rem;
}
50% {
height: 40px;
width: 250px;
font-size: 1rem;
}
75% {
height: 60px;
width: 270px;
font-size: 1.5rem;
}
100% {
height: 40px;
width: 250px;
font-size: 1rem;
}
}
                            
                        

To create the pulse effect, I increase the width, height and font-size then cycle the properties back to their original values. The @keyframes rule works by using percentages for the animation; 0% is the beginning and 100% is the end. You can add as many steps between 0–100% as you’d like.

For this example, I have chosen to use increments of 25%. In Step 2, I define the whole animation as 2s (2 seconds). So, if 25% of 2 seconds is 0.5 seconds, then it will take 0.5 seconds for the animation to go from 0% to 25%. Depending on what properties you are changing, this may not suit the animation you are trying to achieve. If that’s the case, you may want to consider adjusting your steps or duration accordingly.

The end result with the full HTML and CSS can be seen here.

You won’t need a fallback for this animation effect, because any email client that doesn’t support it will simply display the button in its static form instead. In this case, that would be its first keyframe state at 0%, seen in the image above.

Unfortunately, Gmail, Gmail App, Outlook 2007–16, Outlook.com and Yahoo! Mail do not support @keyframes. For a full list of email client support, check out FreshInbox’s CSS compatibility guide.

With this in mind, it is important to know your audience. After all, it may not be beneficial to use pulsing buttons if 99.99% of your audience uses Outlook 2007–2016 as their email client. Email on Acid provides advanced email analytics that can help you understand which email clients your subscribers use so you can optimize for them.

Unfortunately, it seems that Mailchimp removes the percent sign from the @keyframes CSS in the <head> of the email’s HTML. This causes the animation to break so it still only shows as a static button.

This happens due to Mailchimp making all CSS inline, regardless of where the CSS file is hosted. Currently, they do not offer a toggle to prevent this inline styling, and it seems that there no workarounds for sending a pulsing button using Mailchimp.

If a pulsing CTA in email makes sense for your brand, there is a real benefit to using one. It’s rare enough that it will stand out to people and could very well have a significant impact on your engagement. However, depending on the animation and how it is put to use, it can be overwhelming. You can read my recent post about that here.

If you need more help or you want to share your own amazing animations, leave a comment below or hit us up on social.