
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.
Step 1: Give Your Button Some Class
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:
Read more on CSS Basics: A Beginner’s Guide to Stylizing HTML
Step 2: Set the Scene
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;
Why shorten the code?
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.
Step 3: Add the Magic
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.
A @keyframes rule specifies the style properties at each stage of the animation as it rotates from one set of CSS to the next.
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.
What about fallbacks?
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.
Support for Animated Buttons
Email Clients
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.
Email Service Providers (ESPs)
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.
Food for Thought
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.

Author: Steven Sayo
Hailing from the coasts of northern England, Steven brings his passion for email to the men’s fashion industry as a CRM and Email Executive. He is a jack-of-all-trades, covering all aspects of email marketing from design to development to strategy. You can read more of Steven’s insights on email accessibility and coding tips and tricks on Medium or follow him on Twitter at @sayo1337.



Author: Steven Sayo
Hailing from the coasts of northern England, Steven brings his passion for email to the men’s fashion industry as a CRM and Email Executive. He is a jack-of-all-trades, covering all aspects of email marketing from design to development to strategy. You can read more of Steven’s insights on email accessibility and coding tips and tricks on Medium or follow him on Twitter at @sayo1337.
I enjoyed this tutorial/article, it has given another option of something that can be changed within a marketing email to make it attractive (to the right audience.) It allows you to keep the same structure but adds a new component.
Have you used the pulse button on your emails so far?
This functionality is very cool. The burning question is, “Did this drive additional engagement when compared to a static button”?
Absolutely, Craig. Pulsing CTAs are one more tactic to A/B test in emails.
What are the benefits of adding a pulsing CTA as opposed to an animated GIF? Won’t they basically function and look the same?
The pulsing button is code based so it will show up even if images are turned off by the email client
1. Avoid image blocking – Your CTA will be visible no matter the image loading settings, whether the original pulsing version or static (fallback) version loads.
2. Gifs won’t work in some email clients, such as Outlook desktop programs, so that then makes the button image void.
Ultimately, it’s a good way to ensure your CTA is always visible and even better, highlighted to entice the user to click.
While most of our readers open their messages on Outlook, Gmail and Yahoo, this unfortunately wouldn’t work….but can this be done with a hoover tag?
Hover could work! See this email specific resource – https://www.caniemail.com/search/?s=hover
Hover has decent support but not everywhere. It’s really up to you how you want to highlight your CTA.
Steven’s technique basically gives you a way to highlight your CTA in dense designs. This is especially helpful for skimmers who may miss linked text or a neutrally coloured button in the first scroll.