{"id":53423,"date":"2022-09-23T18:13:47","date_gmt":"2022-09-23T22:13:47","guid":{"rendered":"https:\/\/www.litmus.com\/?p=53423"},"modified":"2025-04-08T16:34:14","modified_gmt":"2025-04-08T20:34:14","slug":"how-to-create-an-interactive-email","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/how-to-create-an-interactive-email","title":{"rendered":"Interactive Email for Beginners: 7 Interactive Elements You Can Add to Your Emails Today"},"content":{"rendered":"\n\n\t<div id=\"simple-text-block-block_df65d32028458451e78da6b28c1889b0\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400;\">To create a truly memorable subscriber experience, you have to make your email stand out in the inbox. One way to do that is by adding interactivity to your email campaigns.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">But as desirable as interactivity in email may be, building it can seem intimidating (or frivolous). However, interactive emails don\u2019t have to be scary.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s how to create an interactive email, with seven interactive elements to help email developers get started.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#what\"><span style=\"font-weight: 400;\">What is an interactive email?<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#why\"><span style=\"font-weight: 400;\">Why should you send interactive features in an email?<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#start\"><span style=\"font-weight: 400;\">Getting started with interactive email marketing<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Seven elements to try:<\/span>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a rel=\"noopener\" href=\"#text\"><span style=\"font-weight: 400;\">Hover effects: Text<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a rel=\"noopener\" href=\"#fades\"><span style=\"font-weight: 400;\">Hover effects: Fades<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a rel=\"noopener\" href=\"#colors\"><span style=\"font-weight: 400;\">Hover effects: Background colors<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a rel=\"noopener\" href=\"#images\"><span style=\"font-weight: 400;\">Hover effects: Background images<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a rel=\"noopener\" href=\"#motion\"><span style=\"font-weight: 400;\">Hover effects: Motion<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a rel=\"noopener\" href=\"#flip\"><span style=\"font-weight: 400;\">Flip cards<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a rel=\"noopener\" href=\"#polls\"><span style=\"font-weight: 400;\">Live polls<\/span><\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2 id=\"what\"><span style=\"font-weight: 400;\">What is an interactive email?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">As defined by interactive email expert <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/m_j_robbins?lang=en\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Mark Robbins<\/span><\/a><span style=\"font-weight: 400;\"> (on <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/anchor.fm\/humansofemail\/episodes\/Mark-Robbins-on-Interactive-Email--Neurodiversity-e1ebpl3\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Humans of Email<\/span><\/a><span style=\"font-weight: 400;\">), email interactivity is \u201can action taken in an email that triggers an event, without leaving that email.\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Interactive email elements can take on many forms, including:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Polls<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Surveys<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Tabbed content<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Hamburger menus<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Hot spots<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Quizzes<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Anchor tags<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-interactive-forms-in-email\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Forms<\/span><\/a><span style=\"font-weight: 400;\"> or radio button selection<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Accordions<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Offer reveals<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Review and rating submissions<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Search bar entries\u00a0<\/span><\/li>\n<\/ul>\n<h2 id=\"why\"><span style=\"font-weight: 400;\">Why should you send interactive features in an email?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Email continues to be the most effective marketing channel, with an <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/infographic-the-roi-of-email-marketing\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">ROI of 36:1<\/span><\/a><span style=\"font-weight: 400;\">. That\u2019s why it\u2019s important to constantly improve your subscribers\u2019 experience\u2014and <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/interactive-email-opportunities-and-challenges\" target=\"_blank\">interactive email is the opportunity<\/a> to do just that.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">According to <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.toolbox.com\/marketing\/marketing-automation\/articles\/personalization-and-optimization-will-be-the-focus-for-email-marketers-in-2017\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Martech Advisor<\/span><\/a><span style=\"font-weight: 400;\">, interactive email has the power to increase the rate of click-to-open by 73%. Subscribers want it, too.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s how adding interactive features to your emails can benefit your campaigns:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Boost your conversion rate<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Higher click-through rates<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Gather more data<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Differentiate yourself<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Create a better user experience<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Let\u2019s dive into each.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Boost your conversion rate<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Interactivity allows more to happen inside an email and reduces barriers to engagement\u2014making clickers have even higher intent.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">As such, adding interactivity to your emails can help your brand or business collect more qualified leads, and in return, help you increase the number of conversions.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Higher click-through rates<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Dyspatch reports <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.dyspatch.io\/white-papers\/everything-you-need-to-know-about-amp-for-email\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">60% of email recipients<\/span><\/a><span style=\"font-weight: 400;\"> are likely to engage with an interactive email, and <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.dyspatch.io\/white-papers\/everything-you-need-to-know-about-amp-for-email\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">over 50% of email recipients<\/span><\/a><span style=\"font-weight: 400;\"> said they <\/span><i><span style=\"font-weight: 400;\">want<\/span><\/i><span style=\"font-weight: 400;\"> to interact with content inside their email. In short: subscribers <\/span><i><span style=\"font-weight: 400;\">want<\/span><\/i><span style=\"font-weight: 400;\"> to have interactive experiences.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Interactivity invites audience participation. It entices more subscribers to click-through\u2014increasing the number of visitors to your website and\/or landing page.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Gather more data<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">With interactive email, more clickable elements are added and as result, more data is collected.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Click-data<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">By including UTM codes to track the performance of your links, you help identify and differentiate where subscribers are <\/span><i><span style=\"font-weight: 400;\">actually<\/span><\/i><span style=\"font-weight: 400;\"> clicking in your email. This data can help inform your campaigns, from a design perspective.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Subscriber preferences<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Interactivity can also help collect data on your subscriber preferences.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">With <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/page.litmus.com\/live-polls-and-social-proof.html\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">live polls<\/span><\/a><span style=\"font-weight: 400;\">, subscribers can cast their votes within an email. (Keep reading\u2014we\u2019ll cover this in more detail later in the post!) The results can be used as feedback in many ways, from informing your <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/how-to-plan-your-email-campaign-strategy\" target=\"_blank\">email campaigns<\/a>, to influencing product strategy.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Differentiate yourself<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">While coding an interactive email <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/interactive-emails-top-trend-anyone-using\/#opportunities-challenges\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">may be intimidating<\/span><\/a><span style=\"font-weight: 400;\">, it can help deliver a memorable subscriber experience\u2014and differentiate your emails.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When we asked our <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.linkedin.com\/feed\/update\/urn:li:activity:6931988663861977088\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">audience on LinkedIn<\/span><\/a><span style=\"font-weight: 400;\"> whether or not they\u2019re using it in their emails, a majority of 60% respondents answered \u201cno.\u201d That\u2019s an opportunity for email marketers to use interactive email to stand out from the crowd.<\/span><\/p>\n<figure id=\"attachment_48619\" aria-describedby=\"caption-attachment-48619\" style=\"width: 1200px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"size-full wp-image-48619\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/05\/Litmus-poll-on-interactivity-on-LinkedIn.png\" alt=\"Litmus poll on interactivity on LinkedIn\" width=\"1200\" height=\"761\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/05\/Litmus-poll-on-interactivity-on-LinkedIn.png 1200w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/05\/Litmus-poll-on-interactivity-on-LinkedIn-300x190.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/05\/Litmus-poll-on-interactivity-on-LinkedIn-1024x649.png 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/05\/Litmus-poll-on-interactivity-on-LinkedIn-768x487.png 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/05\/Litmus-poll-on-interactivity-on-LinkedIn-700x444.png 700w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><figcaption id=\"caption-attachment-48619\" class=\"wp-caption-text\"><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.linkedin.com\/feed\/update\/urn:li:activity:6931988663861977088\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Poll on Litmus\u2019 LinkedIn<\/span><\/a><\/figcaption><\/figure>\n<h3><span style=\"font-weight: 400;\">Create a better user experience<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">By allowing subscribers to activate content within an email (vs. taking them to a website or app), interactivity helps reduce friction, creating an overall better user experience.<\/span><\/p>\n<h2 id=\"start\"><span style=\"font-weight: 400;\">Getting started with interactive email marketing\u00a0<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">The secret to experimenting with interactive emails? Start small. Adding simple interactive elements to your <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/foundations-of-email-design\" target=\"_blank\">email designs<\/a> can have a major impact, make your emails more engaging, and uplevel your subscribers\u2019 experience.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">7 interactive elements for email marketers to add to emails<\/span><\/h2>\n<p>Interactive emails don\u2019t have to be out of reach for your team. Here are 7 interactive elements you can add to your emails today.<\/p>\n<h3><span style=\"font-weight: 400;\">Hover effects<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">One of the simplest ways to introduce interactivity to your emails is with a hover effect.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Hover effects are most popular when it comes to highlighting text (for example, highlighting a text link in your email copy). But they\u2019re also a simple but powerful tool to make other elements\u2014including images, background images, or <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/click-tap-and-touch-a-guide-to-cta-best-practices\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">calls-to-action<\/span><\/a><span style=\"font-weight: 400;\"> (CTAs)\u2014interactive and more engaging.<\/span><\/p>\n<h4 id=\"text\"><span style=\"font-weight: 400;\">1. Hover effects: Text<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">With hover effects, you can change nearly any aspect of your text on hover. For example, you can change its color, add a drop shadow, or add an underline.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s an example of how you can change a link\u2019s color from blue to red on hover:<\/span><\/p>\n<img decoding=\"async\" class=\"alignnone size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/screen-recording-2017-12-08-at-10.52-am.gif\" alt=\"Animated GIF showing hover effects for text\" width=\"697\" height=\"285\" \/>\n<p><span style=\"font-weight: 400;\">Here\u2019s how to do it:<\/span><\/p>\n<p><strong>Embed CSS<\/strong><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">.txt-color:hover { color: #8ddaeb !important; }<\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_56f4abda509db058f73451f49198951c\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><strong>HTML \u2013 Text Hover Color Change<\/strong><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;!-- start TEXT HOVER COLOR CHANGE -->\n&lt;a rel=\"noopener\" href=\"#\" style=\"color:#43b9d3; text-decoration:none;\">\n&lt;span style=\"line-height: 21px;\" class=\"txt-color\">\nChange Color on Hover&lt;\/span>&lt;\/a>\n&lt;!-- end TEXT HOVER COLOR CHANGE --><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_a2cf37467ca6c3d2a2d92866d8c4b2d7\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400;\">Note that this effect is supported in:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">AOL<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Apple Mail<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Yahoo Mail<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Gmail<\/span><\/li>\n<\/ul>\n<h4 id=\"fades\"><span style=\"font-weight: 400;\">2. Hover effects: Fades<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Fading effects on hover are another simple but powerful element you can add to your templates. By controlling the opacity of any element\u2014text, images, or tables, for example\u2014and combining that effect with transitions, you can create smooth, gradual hover effects that can make your emails stand out.<\/span><\/p>\n<img decoding=\"async\" class=\"alignnone size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/screen-recording-2017-12-08-at-12.27-pm.gif\" alt=\"Animated GIF showing fade text effect\" width=\"609\" height=\"821\" \/>\n<p><span style=\"font-weight: 400;\">In the example above, we use a hover effect to change the opacity of a text link to 50%. But rather than applying the change immediately, the transition effect set to 0.3 seconds helps smooth out the change in opacity.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When using a transition effect, remember to not only set it on the class that defines the hover state, but also apply the transition to the <\/span><i><span style=\"font-weight: 400;\">original<\/span><\/i><span style=\"font-weight: 400;\"> state. With that, the text fades smoothly on hover, and also smoothly returns to being solid when removing the mouse from the element.<\/span><\/p>\n<p><strong>Embedded CSS<\/strong><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">.fade-slow{ transition: 0.3s !important; } \n.fade-slow:hover{ transition: 0.3s !important; opacity: 0.5 !important;}<\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_eb0b22a07813fe9c4a62288d98a7f646\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><strong>HTML \u2013 Text hover opacity 50% \/ 0.3 seconds<\/strong><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;a rel=\"noopener\" href=\"#\" style=\"color:#43b9d3; text-decoration:none;\"> \n&lt;span style=\"font-size: 18px; line-height: 30px;\" class=\"fade-slow\">\nFade Text&lt;\/span>&lt;\/a><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_fb7a65df348143afcdcef83c0db20a2e\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400;\">The email clients that support this effect include:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">AOL<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Apple Mail<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Gmail<\/span><\/li>\n<\/ul>\n<h4 id=\"colors\"><span style=\"font-weight: 400;\">3. Hover effects: Background colors<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Using a hover effect to change background colors comes in handy when you\u2019d like to give your <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/a-guide-to-bulletproof-buttons-in-email-design\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">bulletproof buttons<\/span><\/a><span style=\"font-weight: 400;\"> a bit of a special treatment.<\/span><\/p>\n<img decoding=\"async\" class=\"alignnone size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/screen-recording-2017-12-08-at-10.51-am.gif\" alt=\"animated GIF showing hover effect over a CTA button\" width=\"636\" height=\"158\" \/>\n<p><span style=\"font-weight: 400;\">Use the below embedded CSS to add a simple color change on hover to your CTA buttons\u2014like in this case, to make it change from red to grey on hover. Simply add the class <code>.bg-rollover<\/code> to the HTML element your bulletproof button is in where the background color is defined.<\/span><\/p>\n<p><strong>Embedded CSS<\/strong><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">.bg-rollover:hover {\nbackground-color: #585f6a !important;\n}<\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_cdf77d8bb1227960e1df7d8fb001af56\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><strong>HTML<\/strong><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;table cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\n&lt;tr>\n&lt;td bgcolor=\"#ee6d69\" align=\"center\">\n&lt;a rel=\"noopener\" target=\"_blank\" href=\"\" class=\"bg-rollover\">Horizontal Expandable Block&lt;\/a>\n&lt;\/td>\n&lt;\/tr>\n&lt;\/table><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_4eb9924d566699f7f64742c9b073cc16\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400;\">This effect is supported in:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">AOL<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Apple Mail<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Yahoo Mail<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Gmail<\/span><\/li>\n<\/ul>\n<h4 id=\"images\"><span style=\"font-weight: 400;\">4. Hover effects: Background images<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">You can also swap out <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-background-images-in-email\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">background images<\/span><\/a><span style=\"font-weight: 400;\"> on hover, as we do in this example:<\/span><\/p>\n<img decoding=\"async\" class=\"alignnone size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/screen-recording-2017-12-08-at-10.50-am.gif\" alt=\"animated GIF example of background image behind system text &amp; floating image hover effect \" width=\"822\" height=\"502\" \/>\n<p><span style=\"font-weight: 400;\">In the CSS, you\u2019re simply changing the background image URL on hover. You can combine it with a transition to achieve a fading effect (just as we saw in the examples above). Plus, since it\u2019s a background image rather than a regular image, you can layer elements on top of your image, including links, text, or floating image elements.<\/span><\/p>\n<p style=\"padding-left: 15px; border-left: 10px solid #0d5477;\"><strong>Take it up a notch:<\/strong><span style=\"font-weight: 400;\"> This is how we create the <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/faux-video-a-fallback-for-video-in-email\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">faux video effect<\/span><\/a><span style=\"font-weight: 400;\"> to add a more interactive feel to any video images we use in our emails.<\/span><\/p>\n<p><strong>Embedded CSS<\/strong><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">.bgimg-swap:hover {background-image: url('http:\/\/www.fillmurray.com\/284\/197' ) !important;}<\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_3e327f9145ba6c026ace07e84940c997\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><strong>HTML \u2013 Background image swap<\/strong><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;td class=\"bgimg-swap\"\nbackground=\"http:\/\/www.fillmurray.com\/g\/284\/197\" \nbgcolor=\"#666666\" width=\"284\" height=\"197\" valign=\"top\"><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_0949029703d02f3f4c60d90a94e9d6e5\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400;\">This hover effect is supported in:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">AOL<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Apple Mail<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Yahoo Mail<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Gmail<\/span><\/li>\n<\/ul>\n<h4 id=\"motion\"><span style=\"font-weight: 400;\">5. Hover effects: Motion<\/span><\/h4>\n<p>You can also add a motion effect to your email, which can be useful in cases like highlighting a CTA. Here are two ways to do it:<\/p>\n<h5>Tab pops up &amp; changes color<\/h5>\n<p>Here is a main CTA with a little pop-up tab on top of it that moves up on hover:<\/p>\n<img decoding=\"async\" class=\"alignnone size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/screen-recording-2017-12-08-at-10.47-am.gif\" alt=\"animated GIF showing a tab sliding up and changing color on hover\" width=\"658\" height=\"387\" \/>\n<p>The pop-up tab is a bottom aligned tab that lives inside a taller container. Hovering over the tab changes its color and increases its height. Since the tab itself is anchored to the bottom, this makes the tab pop up. Add a transition to it and you have the pop-up that grows slowly on hover.<\/p>\n<p>Here\u2019s the code for the pop-up. Add it <em>above<\/em> any CTA or content you want to highlight with this pop-up.<\/p>\n<p><strong>Embedded CSS<\/strong><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">.grow {transition: 0.3s !important;} \n.grow:hover {background-color: #298aae !important;\nheight: 50px !important; position: relative !important; \ntransition: 0.3s !important;}<\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_eb706c180c97bb6bb69bb50236782107\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><strong>HTML \u2013 Tab pops up &amp; changes color<\/strong><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;table border=\"0\" cellpadding=\"0\"\ncellspacing=\"0\" align=\"center\">&lt;tr>&lt;td\nheight=\"60\" align=\"center\" valign=\"bottom\"\nstyle=\"vertical-align:bottom;\">\n&lt;table class=\"grow\" border=\"0\" width=\"270\" height=\"30\" cellpadding=\"0\" cellspacing=\"0\" bgcolor=\"#187395\" align=\"center\">&lt;tr>\n&lt;td align=\"center\" height=\"30\" valign=\"top\" style=\"vertical-align:top; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height: 19px; color: #ffffff; text-align:center; display:block; height: 30px;\">\nPop-Up Tab\n&lt;\/td>&lt;\/tr>&lt;\/table>&lt;\/td>&lt;\/tr>&lt;\/table><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_58f8979d8f8baea97e63e0f889cc7d5f\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400;\">This is supported in the following email clients:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">AOL<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Apple Mail<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Yahoo Mail<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Gmail<\/span><\/li>\n<\/ul>\n<h5>Depression on hover<\/h5>\n<p>You can also make your CTA buttons depress on hover, like we did in our newsletter:<\/p>\n<figure id=\"attachment_30399\" aria-describedby=\"caption-attachment-30399\" style=\"width: 600px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"wp-image-30399 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2017\/11\/top-design-trends-button.gif\" alt=\"top design trends button\" width=\"600\" height=\"505\" \/><figcaption id=\"caption-attachment-30399\" class=\"wp-caption-text\"><a rel=\"noopener\" href=\"https:\/\/litmus.com\/scope\/fidw0afokzae\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">See it on Scope \u2192 <\/span><\/a><\/figcaption><\/figure>\n<p><span style=\"font-weight: 400;\">The CTA button is designed with a box shadow. Once the cursor hovers over the button, the box shadow disappears and the button is translated using the transform CSS property, emulating a depression effect. <\/span><\/p>\n<p><strong>Embedded CSS<\/strong><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">.btn { transition: 0.3s;  }\n.btn:hover { transform: translate(7px, 8px); box-shadow: none !important; }<\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_feb0e66b771a9e7f0fb0623ef4856a11\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><strong>HTML &#8211; Depression on hover<\/strong><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;a class=\"btn\" rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/email-design-trends-what-we-are-expecting-in-2021\/\" style=\"box-shadow: 7px 8px 0px 0px #0F618A;-webkit-box-shadow: 7px 8px 0px 0px #0F618A;background-color:#dbe8f0;border:2px solid #0f618a;color:#072a3b;display:inline-block;font-size:18px;font-weight:bold;line-height:50px;text-align:center;text-decoration:none;width:151px;-webkit-text-size-adjust:none;mso-hide:all;\">Ooh and aah&lt;\/a><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_2bdfb4c9ec5891b40eba0b2f1cba5e1c\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400;\">This effect is supported on Apple Mail. We made the button appear the same in Gmail and Outlook using some background images (Gmail) and VML (Outlook), but neither client supports the transform property, so the motion didn\u2019t appear there. <\/span><\/p>\n<h3 id=\"flip\"><span style=\"font-weight: 400;\">6. Flip cards<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Looking to add a unique bit of interactivity to your emails? Try flip cards, like we did in our <\/span><a rel=\"noopener\" href=\"https:\/\/litmus.com\/scope\/wuoccjxlvf6k\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">May 2022 newsletter<\/span><\/a><span style=\"font-weight: 400;\">, where the theme was all about magic.<\/span><\/p>\n<figure style=\"width: 600px\" class=\"wp-caption alignnone\"><img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/manual\/cards-moving-and-being-flipped.gif\" alt=\"animated GIF showing cards flipping on hover\" width=\"600\" height=\"641\" \/><figcaption class=\"wp-caption-text\"><a rel=\"noopener\" href=\"https:\/\/litmus.com\/scope\/wuoccjxlvf6k\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">See it on Scope \u2192\u00a0<\/span><\/a><\/figcaption><\/figure>\n<p style=\"padding-left: 15px; border-left: 10px solid #0d5477;\"><strong>Want to stay in touch with the tinkerings of our email team? <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/subscribe\/\" target=\"_blank\" rel=\"noopener\">Subscribe to our newsletters<\/a> for more \u201csurprise and delight\u201d subscriber experiences like this \u2192\u00a0<\/strong><\/p>\n<p><span style=\"font-weight: 400;\">Powered by advanced CSS animation, this interactive flip card content accounted for 12.2% of all unique clicks in the email.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Get the full tutorial (and code) <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/create-flip-cards-in-email\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">in this blog post<\/span><\/a><span style=\"font-weight: 400;\"> by Litmus\u2019 email developer, Carin Slater\u2014fallbacks included.<\/span><\/p>\n<h3 id=\"polls\"><span style=\"font-weight: 400;\">7. Live polls<\/span><\/h3>\n<p><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/page.litmus.com\/live-polls-and-social-proof.html\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Live polls<\/span><\/a><span style=\"font-weight: 400;\"> are an engaging and tactful way to collect real-time interest in email. They encourage initial and repeat interaction, when subscribers reopen emails as votes update.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">How does it work?<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">With a tool like <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-personalization\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Litmus Personalize, powered by Kickdynamic<\/span><\/a><span style=\"font-weight: 400;\">, you can set up campaigns that help capture click-data, which are counted as \u201cvotes\u201d in polls and surveys.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Poll results are updated based on click interaction. Images in the emails are then updated at open, surfacing the live vote percentage for each category.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Example: Kate Spade<\/span><\/h4>\n<p><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.katespade.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Kate Spade<\/span><\/a><span style=\"font-weight: 400;\"> uses live polls as an engaging way to gather feedback from subscribers.<\/span><\/p>\n<img decoding=\"async\" class=\"alignnone size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/09\/K-S-2.jpg\" alt=\"Kate Spade email example showing live polls\" width=\"1268\" height=\"2408\" \/>\n<p><span style=\"font-weight: 400;\">This email encourage subscribers to click and helps Kate Spade collect valuable data on their subscribers (in this case, jewelry preferences). This insight can then be used to create more <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/personalized-experience-using-crm-data\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">personalized experiences<\/span><\/a><span style=\"font-weight: 400;\"> in the future.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For a closer look, head over to our blog post on <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/feature-friday-kate-spade\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">How Kate Spade Uses Live Polls in Email<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Example: Litmus\u2019 monthly newsletter<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">In our <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/subscribe\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">monthly newsletter<\/span><\/a><span style=\"font-weight: 400;\">, we use sentiment polls at the end of our newsletters to collect subscriber feedback, inviting audience participation and engagement.<\/span><\/p>\n<figure id=\"attachment_53449\" aria-describedby=\"caption-attachment-53449\" style=\"width: 1080px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"wp-image-53449 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/09\/interactive-email-sentiment-poll-on-Litmus-newsletter.png\" alt=\"interactive email sentiment poll on Litmus' newsletter\" width=\"1080\" height=\"530\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/09\/interactive-email-sentiment-poll-on-Litmus-newsletter.png 1080w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/09\/interactive-email-sentiment-poll-on-Litmus-newsletter-300x147.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/09\/interactive-email-sentiment-poll-on-Litmus-newsletter-1024x503.png 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/09\/interactive-email-sentiment-poll-on-Litmus-newsletter-768x377.png 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/09\/interactive-email-sentiment-poll-on-Litmus-newsletter-700x344.png 700w\" sizes=\"(max-width: 1080px) 100vw, 1080px\" \/><figcaption id=\"caption-attachment-53449\" class=\"wp-caption-text\"><a rel=\"noopener\" href=\"https:\/\/litmus.com\/scope\/cm5x3x7ruwxz\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">See it in Scope \u2192\u00a0<\/span><\/a><\/figcaption><\/figure>\n<h4><span style=\"font-weight: 400;\">Example: Litmus\u2019 Product Pulse newsletter<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Our <\/span><a rel=\"noopener\" href=\"https:\/\/litmus.com\/scope\/xbzukrlxkxri\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">first-ever Product Pulse newsletter<\/span><\/a><span style=\"font-weight: 400;\"> launched with a live poll, asking subscribers to pick topics they wanted to learn more about. (Asking subscribers for feedback is not only a marketing best practice but also a <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/newsletter-best-practices\" target=\"_blank\" rel=\"noopener\">newsletter best practice<\/a>!)<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This encouraged engagement <\/span><i><span style=\"font-weight: 400;\">and<\/span><\/i><span style=\"font-weight: 400;\"> served as data to help inform our email content strategy, helping us deliver more relevant subscriber experiences in the future.<\/span><\/p>\n<figure id=\"attachment_53450\" aria-describedby=\"caption-attachment-53450\" style=\"width: 600px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"wp-image-53450 \" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/09\/interactive-email-live-poll-on-Litmus-Product-Pulse-newsletter.png\" alt=\"interactive email live poll on Litmus' Product Pulse newsletter\" width=\"600\" height=\"891\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/09\/interactive-email-live-poll-on-Litmus-Product-Pulse-newsletter.png 632w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/09\/interactive-email-live-poll-on-Litmus-Product-Pulse-newsletter-202x300.png 202w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><figcaption id=\"caption-attachment-53450\" class=\"wp-caption-text\"><a rel=\"noopener\" href=\"https:\/\/litmus.com\/scope\/xbzukrlxkxri\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">See it on Scope \u2192\u00a0<\/span><\/a><\/figcaption><\/figure>\n<h2><span style=\"font-weight: 400;\">Start creating interactive emails today!<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Interactive email may seem intimidating, but it doesn\u2019t have to be! Start small with any of the above elements\u2014and remember to test your email to ensure your designs come across right.<\/span><\/p>\n<p><i><span style=\"font-weight: 400;\">Originally by Alice Li, from her Litmus Live session, &#8220;Getting Started with Interactive Email.&#8221;<\/span><\/i><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n<div id=\"post-cta-buttonblock_6ac8854e294edcc68cd6080d04748507\" class=\"block-post-cta-button mt-5\">\n  <div class=\"container px-0\">\n    <div class=\"row\">\n      <div class=\"blog-post-cta-button-wrapper col-12 col-lg-10 mx-auto p-4 d-block d-lg-flex align-items-lg-center align-items-start\">\n\t\t  \t\t  \t\t  \t\t  \t\t  <div class=\"blog-post-cta-button-icon col-2 float-start mx-auto float-lg-start float-none background-white d-flex flex-column justify-content-center align-items-center text-center\">\n\t\t\t  <img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/07\/blog-cta-buttons-issues.svg\">\n\t\t  <\/div><!--blog-post-cta-button-icon-->\n\t\t  <div class=\"col-12 col-lg-9 ps-lg-4 ps-0 text-center text-lg-start mt-3 mt-lg-0\">\n\t\t\t  <h2 class=\"h-sm\"><strong>Ensure your designs come across right<\/strong><\/h2>\n\t\t\t  <p>Broken emails lead to less conversions. Preview your emails across 100+ email clients, apps, and devices to ensure an on-brand, error-free subscriber experience. Every time.<\/p>\n\t\t  <\/div><!--col-12 col-lg-9 ps-lg-4 ps-0 text-center text-lg-start mt-3 mt-lg-0-->\n\t\t  <div class=\"text-center text-lg-end col-12 col-lg-1 ms-lg-2 ms-0\">\n\t\t\t  <a class=\"btn btn-primary\" rel=\"noopener\" target=\"_blank\" href=\"\/email-testing\/\">Learn more<\/a>\n\t\t  <\/div><!--text-center text-lg-end col-12 col-lg-1 ms-lg-2 ms-0-->\n\t\t  \t\t  \t\t  \t\t  \t\t       <\/div><!--blog-post-cta-button-wrapper-->\n    <\/div><!--row-->\n  <\/div><!--container-->\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Interactive emails don\u2019t have to be out of reach for your team. Read and learn how to create an interactive email and 7 elements you can add to your emails! <\/p>\n","protected":false},"author":25,"featured_media":53426,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"tags":[10266,152,10270,478,10272,102],"blog_category":[10300],"class_list":["post-53423","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-animation","tag-call-to-action","tag-css","tag-design","tag-developer","tag-html","blog_category-email-building"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>7 Interactive Elements You Can Add to Your Emails Today - Litmus<\/title>\n<meta name=\"description\" content=\"Want to increase email engagement? Learn 7 interactive email elements to captivate subscribers and drive higher conversions.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.litmus.com\/blog\/how-to-create-an-interactive-email\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Interactive Email for Beginners: 7 Interactive Elements You Can Add to Your Emails Today\" \/>\n<meta property=\"og:description\" content=\"Want to increase email engagement? Learn 7 interactive email elements to captivate subscribers and drive higher conversions.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.litmus.com\/blog\/how-to-create-an-interactive-email\" \/>\n<meta property=\"og:site_name\" content=\"Litmus\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/litmusapp\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-23T22:13:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-08T20:34:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/09\/7-interactive-elements.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1380\" \/>\n\t<meta property=\"og:image:height\" content=\"725\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@litmusapp\" \/>\n<meta name=\"twitter:site\" content=\"@litmusapp\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"7 Interactive Elements You Can Add to Your Emails Today - Litmus","description":"Want to increase email engagement? Learn 7 interactive email elements to captivate subscribers and drive higher conversions.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.litmus.com\/blog\/how-to-create-an-interactive-email","og_locale":"en_US","og_type":"article","og_title":"Interactive Email for Beginners: 7 Interactive Elements You Can Add to Your Emails Today","og_description":"Want to increase email engagement? Learn 7 interactive email elements to captivate subscribers and drive higher conversions.","og_url":"https:\/\/www.litmus.com\/blog\/how-to-create-an-interactive-email","og_site_name":"Litmus","article_publisher":"https:\/\/www.facebook.com\/litmusapp","article_published_time":"2022-09-23T22:13:47+00:00","article_modified_time":"2025-04-08T20:34:14+00:00","og_image":[{"width":1380,"height":725,"url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/09\/7-interactive-elements.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_creator":"@litmusapp","twitter_site":"@litmusapp","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.litmus.com\/blog\/how-to-create-an-interactive-email#article","isPartOf":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-create-an-interactive-email"},"author":{"name":"","@id":""},"headline":"Interactive Email for Beginners: 7 Interactive Elements You Can Add to Your Emails Today","datePublished":"2022-09-23T22:13:47+00:00","dateModified":"2025-04-08T20:34:14+00:00","mainEntityOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-create-an-interactive-email"},"wordCount":13,"publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-create-an-interactive-email#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/09\/7-interactive-elements.png","keywords":["Animation","Call-To-Action","CSS","Design","Developer","HTML"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.litmus.com\/blog\/how-to-create-an-interactive-email","url":"https:\/\/www.litmus.com\/blog\/how-to-create-an-interactive-email","name":"7 Interactive Elements You Can Add to Your Emails Today - Litmus","isPartOf":{"@id":"https:\/\/www.litmus.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-create-an-interactive-email#primaryimage"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-create-an-interactive-email#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/09\/7-interactive-elements.png","datePublished":"2022-09-23T22:13:47+00:00","dateModified":"2025-04-08T20:34:14+00:00","description":"Want to increase email engagement? Learn 7 interactive email elements to captivate subscribers and drive higher conversions.","breadcrumb":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-create-an-interactive-email#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.litmus.com\/blog\/how-to-create-an-interactive-email"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/blog\/how-to-create-an-interactive-email#primaryimage","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/09\/7-interactive-elements.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/09\/7-interactive-elements.png","width":1380,"height":725},{"@type":"BreadcrumbList","@id":"https:\/\/www.litmus.com\/blog\/how-to-create-an-interactive-email#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.litmus.com\/"},{"@type":"ListItem","position":2,"name":"Interactive Email for Beginners: 7 Interactive Elements You Can Add to Your Emails Today"}]},{"@type":"WebSite","@id":"https:\/\/www.litmus.com\/#website","url":"https:\/\/www.litmus.com\/","name":"Litmus","description":"Are you getting the most out of your email marketing?","publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.litmus.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.litmus.com\/#organization","name":"Litmus Software","url":"https:\/\/www.litmus.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","width":600,"height":314,"caption":"Litmus Software"},"image":{"@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/litmusapp","https:\/\/x.com\/litmusapp"]},{"@type":"Person","@id":""}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/53423","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/comments?post=53423"}],"version-history":[{"count":15,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/53423\/revisions"}],"predecessor-version":[{"id":114228,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/53423\/revisions\/114228"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media\/53426"}],"wp:attachment":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media?parent=53423"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/tags?post=53423"},{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/blog_category?post=53423"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}