[{"_1":2,"_72":-5,"_73":-5},"loaderData",{"_3":4,"_12":13},"root",{"_5":-5,"_6":7,"_8":9,"_10":11},"user","recaptchaSiteKey","6Ler9Q4rAAAAAIntb4jBhAbPRXMJSQVneAzxg5M8","sentryTrace","dcb6f3aff5052287f93429a102a5101d-610907666a437e28-0","sentryBaggage","sentry-environment=production,sentry-public_key=fbef35ac88c344bffa6f98009cf3736c,sentry-trace_id=dcb6f3aff5052287f93429a102a5101d,sentry-org_id=4505908219871232,sentry-sampled=false,sentry-sample_rand=0.9906393317720477,sentry-sample_rate=0.5","routes/domain.$domainId",{"_14":15,"_68":69,"_5":-5,"_70":71},"domain",{"_16":17,"_14":18,"_19":20,"_21":22,"_23":24,"_25":26,"_27":28,"_29":-5,"_30":-5,"_31":-5,"_32":33,"_43":44,"_52":53,"_66":67},"id","cmhdw6mr3008xl002d0f2rsgp","www.litmus.com","screenshotPath","sites/www.litmus.com/screenshot.jpg","htmlPath","sites/www.litmus.com/index.html","metaDescription","Avoid the frustration of broken email buttons. Discover how to create bulletproof CTA buttons that render perfectly across every email client.","importantText","Your Guide to Bulletproof Email Buttons that Work - Litmus \n\n \n\n [Skip to main content](#main)\n\n[Litmus Live is back February 11-12, 2026! 100% free + virtual. Get updates.](https://www.litmus.com/conference)\n\n[![Litmus](https://www.litmus.com/wp-content/uploads/2025/04/litmus-validity-logo-04142025.svg)\n\n![Litmus](https://www.litmus.com/wp-content/uploads/2025/04/litmus-validity-logo-04142025.svg)\n\n![Litmus](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20293%20108'%3E%3C/svg%3E)\n\n![Litmus](https://www.litmus.com/wp-content/uploads/2025/04/litmus-validity-reversed-04142025.svg)\n\n](https://www.litmus.com/)\n\n* [Capabilities](#)\n \n Capabilities\n \n Litmus is an all-in-one email marketing solution that helps you optimize and personalize every email to maximize your ROI and create exceptional brand experiences for every subscriber.\n \n * [Email Monitoring](https://www.litmus.com/email-guardian)\n * [Email Design](https://www.litmus.com/email-design)\n * [Email Building](https://www.litmus.com/email-builder)\n * [Email Personalization](https://www.litmus.com/email-personalization)\n * [Email Testing](https://www.litmus.com/email-testing)\n * [Spam Testing](https://www.litmus.com/spam-filter-tests)\n * [Email Analytics](https://www.litmus.com/email-analytics)\n * [Email Collaboration and Review](https://www.litmus.com/collaboration)\n * [AI & Emerging Email Technologies](https://www.litmus.com/ai-emerging-email-technology)\n \n [Why Litmus](https://www.litmus.com/why-litmus)\n \n Create exceptional brand experiences for every subscriber.\n \n [Learn more](https://www.litmus.com/why-litmus)\n \n * * *\n \n What's New\n \n Our latest updates to make your email marketing even more effective.\n \n [Learn more](https://www.litmus.com/product-updates)\n \n* [Integrations](#)\n \n [Technology Integrations](https://www.litmus.com/integrations)\n \n Litmus integrates seamlessly with your email service provider (ESP), code editor, and more.\n \n * [Technology Integrations](https://www.litmus.com/integrations)\n \n [Email Service Provider](https://www.litmus.com/solutions/esp)\n \n Litmus gives you a powerful set of tools to increase conversions and get more ROI from your ESP.\n \n * [Acoustic Campaign](https://www.litmus.com/solutions/esp/acoustic)\n * [Adobe Campaign Standard](https://www.litmus.com/solutions/esp/adobe-campaign-standard)\n * [Adobe Journey Optimizer](https://www.litmus.com/solutions/esp/adobe-journey-optimizer)\n * [Adobe Marketo](https://www.litmus.com/solutions/esp/marketo)\n * [Campaign Monitor](https://www.litmus.com/solutions/esp/campaign-monitor)\n * [HubSpot](https://www.litmus.com/solutions/esp/hubspot)\n * [Klaviyo](https://www.litmus.com/solutions/esp/klaviyo)\n * [Mailchimp](https://www.litmus.com/solutions/esp/mailchimp)\n * [Oracle Eloqua](https://www.litmus.com/solutions/esp/eloqua)\n * [Oracle Responsys](https://www.litmus.com/solutions/esp/responsys)\n * [Salesforce Marketing Cloud](https://www.litmus.com/solutions/esp/salesforce-marketing-cloud)\n * [SAP Marketing Cloud](https://www.litmus.com/solutions/esp/sap-marketing-cloud)\n \n* [Pricing](https://www.litmus.com/pricing)\n* [Resources](https://www.litmus.com/resources)\n \n Email marketing content\n \n Elevate your email marketing with our expert insights, tips, trends, and tools.\n \n * [Resource Center](https://www.litmus.com/resources)\n * [Blog](https://www.litmus.com/blog)\n * [Ebooks and Reports](https://www.litmus.com/resources)\n * [State of Email Reports](https://www.litmus.com/state-of-email-reports)\n * [Convince Your Team](https://www.litmus.com/convince-your-team)\n \n Free Tools\n \n Leverage these free tools from Litmus to enhance your email marketing today.\n \n * [Email Client Market Share](https://www.litmus.com/email-client-market-share)\n * [Templates](https://www.litmus.com/email-templates)\n \n Customers\n \n Thousands of brands across every size and industry trust Litmus to send better email, faster.\n \n * [Community](https://litmus.com/community)\n * [Customer Success Stories](https://www.litmus.com/customers)\n * [Email Gallery](https://www.litmus.com/email-gallery)\n * [Litmus Academy](https://www.litmus.com/litmus-academy)\n * [Help Center](https://knowledge.validity.com/s/litmus-home?language=en_US)\n \n Events\n \n Join us at an upcoming event, conference, or view previous events on-demand.\n \n * [Upcoming Events](https://www.litmus.com/events)\n * [Previous Events](https://www.litmus.com/resources)\n * [Litmus Live](https://www.litmus.com/conference)\n \n* [Company](https://www.litmus.com/about)\n \n Company\n \n Here at Litmus, we help companies get more from their entire marketing mix by putting the most dependable channel—email—first.\n \n * [Our Story](https://www.litmus.com/about)\n * [Careers](https://www.litmus.com/careers)\n * [News](https://www.litmus.com/press/)\n * [Partner With Litmus](https://www.litmus.com/partnership)\n * [Co-Marketing With Litmus](https://www.litmus.com/co-marketing-with-litmus)\n \n [Contact Us](https://www.litmus.com/contact-us)\n \n Headquarters - Boston675 Massachusetts Avenue, 10th Floor \n Cambridge, MA 02139 \n [+1 (866) 787-7030](tel:+18667877030) \n [hello@litmus.com](mailto:hello@litmus.com)\n \n Silicon Valley231 2nd Avenue \n San Mateo, CA 94401\n \n LondonFloor 3, 9 Devonshire Square \n London EC2M 4YF\n \n [](https://www.facebook.com/litmusapp)[](https://twitter.com/litmusapp)[](https://www.linkedin.com/company/litmus-com/)[](https://www.instagram.com/litmusapp)\n \n\nSearch [Login](https://litmus.com/sessions/new) [Try for Free](/pricing/)\n\nWhat can we help you find?\n\n![](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2050%2050'%3E%3C/svg%3E)\n\n![](https://www.litmus.com/wp-content/uploads/2022/03/litmus-icon.svg)\n\nQuick Links\n\n[Dark Mode Central](https://www.litmus.com/dark-mode-email-best-practices) [Spam and Deliverability Knowledge Center](https://www.litmus.com/email-deliverability-spam-best-practices) [Mail Privacy Protection (MPP) Hub](https://www.litmus.com/apple-mail-privacy-protection-resources) [Email Templates](https://www.litmus.com/email-templates) [State of Email Reports](https://www.litmus.com/state-of-email-reports) [Email Personalization Handbook](https://www.litmus.com/resources/email-personalization-guide) [Getting Started With Litmus](https://www.litmus.com/getting-started) [Why Litmus?](https://www.litmus.com/why-litmus) [Help Center](https://help.litmus.com/)\n\n \n\n* [Blog](https://www.litmus.com/blog \"See all Litmus blog posts\")\n* [Email Building](https://www.litmus.com/blog/?blog_category=email-building \"See all posts categorized as Email Building\")\n* [Email Design](https://www.litmus.com/blog/?blog_category=email-design \"See all posts categorized as Email Design\")\n\nYour Guide to Bulletproof Email Buttons that Work\n=================================================\n\nApril 3, 2025 19 min read\n\n* Share\n* [Share page through Facebook](https://www.facebook.com/sharer.php?u=https://www.litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design)\n* [Share page through Twitter](https://twitter.com/intent/tweet?url=https://www.litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design&text=Your%20Guide%20to%20Bulletproof%20Email%20Buttons%20that%20Work&via=litmusapp)\n* [Share page through Linkedin](https://www.linkedin.com/sharing/share-offsite/?url=https://www.litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design&title=Your%20Guide%20to%20Bulletproof%20Email%20Buttons%20that%20Work)\n* [Share page through e-mail](mailto:?subject=Your%20Guide%20to%20Bulletproof%20Email%20Buttons%20that%20Work&body=Your%20Guide%20to%20Bulletproof%20Email%20Buttons%20that%20Work%20https://www.litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design)\n\n**Thank you for subscribing!**\n\n* Subscribe to our newsletter\n \n **Ready for more great email content?** Subscribe to our newsletter.\n \n LinkedIn\n \n This field is for validation purposes and should be left unchanged.\n \n Email Address(Required)\n \n Country(Required)\n \n Select a CountryUnited StatesUnited KingdomCanadaAfghanistanAlbaniaAlgeriaAmerican SamoaAndorraAngolaAnguillaAntarcticaAntigua and BarbudaArgentinaArmeniaArubaAustraliaAustriaAzerbaijanBahamasBahrainBangladeshBarbadosBelarusBelgiumBelizeBeninBermudaBhutanBoliviaBonaire, Sint Eustatius and SabaBosnia and HerzegovinaBotswanaBouvet IslandBrazilBritish Indian Ocean TerritoryBrunei DarussalamBulgariaBurkina FasoBurundiCabo VerdeCambodiaCameroonCayman IslandsCentral African RepublicChadChileChinaChristmas IslandCocos IslandsColombiaComorosCongoCongo, Democratic Republic of theCook IslandsCosta RicaCroatiaCubaCuraçaoCyprusCzechiaCôte d'IvoireDenmarkDjiboutiDominicaDominican RepublicEcuadorEgyptEl SalvadorEquatorial GuineaEritreaEstoniaEswatiniEthiopiaFalkland IslandsFaroe IslandsFijiFinlandFranceFrench GuianaFrench PolynesiaFrench Southern TerritoriesGabonGambiaGeorgiaGermanyGhanaGibraltarGreeceGreenlandGrenadaGuadeloupeGuamGuatemalaGuernseyGuineaGuinea-BissauGuyanaHaitiHeard Island and McDonald IslandsHoly SeeHondurasHong KongHungaryIcelandIndiaIndonesiaIranIraqIrelandIsle of ManIsraelItalyJamaicaJapanJerseyJordanKazakhstanKenyaKiribatiKorea, Democratic People's Republic ofKorea, Republic ofKuwaitKyrgyzstanLao People's Democratic RepublicLatviaLebanonLesothoLiberiaLibyaLiechtensteinLithuaniaLuxembourgMacaoMadagascarMalawiMalaysiaMaldivesMaliMaltaMarshall IslandsMartiniqueMauritaniaMauritiusMayotteMexicoMicronesiaMoldovaMonacoMongoliaMontenegroMontserratMoroccoMozambiqueMyanmarNamibiaNauruNepalNetherlandsNew CaledoniaNew ZealandNicaraguaNigerNigeriaNiueNorfolk IslandNorth MacedoniaNorthern Mariana IslandsNorwayOmanPakistanPalauPalestine, State ofPanamaPapua New GuineaParaguayPeruPhilippinesPitcairnPolandPortugalPuerto RicoQatarRomaniaRussian FederationRwandaRéunionSaint BarthélemySaint Helena, Ascension and Tristan da CunhaSaint Kitts and NevisSaint LuciaSaint MartinSaint Pierre and MiquelonSaint Vincent and the GrenadinesSamoaSan MarinoSao Tome and PrincipeSaudi ArabiaSenegalSerbiaSeychellesSierra LeoneSingaporeSint MaartenSlovakiaSloveniaSolomon IslandsSomaliaSouth AfricaSouth Georgia and the South Sandwich IslandsSouth SudanSpainSri LankaSudanSurinameSvalbard and Jan MayenSwedenSwitzerlandSyria Arab RepublicTaiwanTajikistanTanzania, the United Republic ofThailandTimor-LesteTogoTokelauTongaTrinidad and TobagoTunisiaTurkmenistanTurks and Caicos IslandsTuvaluTürkiyeUS Minor Outlying IslandsUgandaUkraineUnited Arab EmiratesUruguayUzbekistanVanuatuVenezuelaViet NamVirgin Islands, BritishVirgin Islands, U.S.Wallis and FutunaWestern SaharaYemenZambiaZimbabweÅland Islands\n \n By submitting the form, you are agreeing that you read and consent to our privacy policy. We may also contact you via email, phone, and other electronic means to communicate information about our products and services. You may opt-out or update your contact information previously provided to us, by following the instructions at [https://www.validity.com/privacy-policy/](https://www.validity.com/privacy-policy/)\n \n Privacy Policy(Required)\n \n I acknowledge that I have read and accept the Validity’s Privacy Policy [https://www.validity.com/privacy-policy/](https://www.validity.com/privacy-policy/)\n \n Marketing Opt In\n \n I want to receive marketing communications and offers from Validity. I understand I can unsubscribe at any time as described in the Validity’s Privacy Policy.\n \n \n \n\n \n\n### Key takeaways ✨\n\n* **You should never use bulletproof button images** because they get lost when images are turned off—and they’re not accessible.\n* **Eye-catching and clickable buttons** depend on multiple factors like shape, size, spacing, and more.\n* **There are five ways to code** bulletproof CTAs including conditional-padding, VML-based, padding-based, border-based, and padding-and-border-based.\n* Defining what bulletproof buttons are to help you build CTAs that display consistently across all email clients—even with images turned off.\n* Avoiding common pitfalls of image-based buttons to improve accessibility, click-through rates, and email reliability.\n* Exploring five bulletproof button coding methods tailored for rendering consistency and easier updates across campaigns.\n* Enhancing CTA performance with advanced techniques that solve rendering issues in Outlook and adapt to Dark Mode environments.\n\n \nHave you heard of the email design-shop analogy? If your webpage is your store, and your email is your shop window, then your [call-to-action (CTA)](https://www.litmus.com/resources/guide-to-ctas/) button is your amazing window display that draws people in. Needless to say, your CTA is one of the most important parts of your email, and if it’s hard to find, hard to use, or broken in any way, your subscribers aren’t going to click! \n\nDon’t worry, though. We’re here to help make sure your CTA buttons are bulletproof and can be seen by all customers, regardless of email client or viewing preferences.\n\nIn this blog post, we will dive deeper into the methods of crafting bulletproof buttons for your subscribers to improve the user experience—and your [email campaign performance](https://www.litmus.com/blog/improve-email-marketing).\n\n### Table of contents\n\n* [What’s a bulletproof button?](#definition)\n* [Button design best practices](#design)\n* [5 coding techniques](#coding)\n * [Conditional-padding button](#conditional-padding)\n * [VML button](#vml)\n * [Padding button](#padding)\n * [Border button](#border)\n * [Padding + border button](#padding-plus-border)\n* [Advanced button hacks and enhancements](#advanced-enhancements)\n* [Email client support (table) with tips for Dark Mode](#supporttable)\n\nWhat’s a bulletproof button?\n----------------------------\n\nBulletproof buttons are call-to-action buttons built with code instead of images. You can reliably swap your GIFs, PNGs, and JPEGs for HTML and CSS. By only using code, the button will display in all email clients even with images off, hence making them “bulletproof.”\n\nWhat’s more, you can update the content and style of your buttons by simply editing your HTML template. You no longer have to waste time crafting buttons in an [email design tool](https://www.litmus.com/blog/state-of-email-design-tools) like Photoshop, uploading them to a server, and updating your HTML.\n\nDo not use bulletproof button images\n------------------------------------\n\nI’m going to say this once and then never say it again. The only _truly_ bulletproof button is an image.\n\nI know. But that’s really the only way you can guarantee your button looks exactly the same in 100% of email clients. Because we all know how inconsistent our emails can look across different email clients, apps, and devices.\n\nDespite this, **you should never use an image-based button**. Image buttons get lost when images are turned off because of [image-blocking](https://litmus.com/blog/the-ultimate-guide-to-email-image-blocking/), and they’re not [accessible for your subscribers](https://www.litmus.com/wp-content/uploads/2020/04/Ultimate_Guide_to_Email_Accessibility.pdf) who use screen readers (more on that in a second).\n\n![image email button with images on vs. off](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20676%20259'%3E%3C/svg%3E)\n\n![image email button with images on vs. off](https://www.litmus.com/wp-content/uploads/2020/04/image-based-button-updated.jpg)\n\n_Image button losing impact when images are disabled_\n\nIf your CTAs are contained within images, there’s a good chance that subscribers are missing out on your message. Even worse, they aren’t interacting with your campaigns.\n\nUsing image-based CTA buttons also impacts the [accessibility](https://www.litmus.com/resources/ultimate-guide-to-email-accessibility/) of your email. If you’re hiding the context of the CTA inside an image, screen readers may not be able to read them, making your email inaccessible for visually impaired subscribers.\n\nVideo Player\n\n[https://www.litmus.com/wp-content/uploads/2017/11/email-button-screen-reader-preview.mp4](https://www.litmus.com/wp-content/uploads/2017/11/email-button-screen-reader-preview.mp4)\n\n00:00\n\n00:00\n\n00:13\n\n[Use Up/Down Arrow keys to increase or decrease volume.\n\n](javascript:void\$0\$;)\n\nNow that you know more about image buttons, you should realize that my initial statement is only mostly true. Image-based buttons look the same in every email client _where images are turned on and only if the subscriber isn’t using a screen reader_. So are they actually bulletproof? No. And as both of these above-mentioned cases are impossible to track using standard email tracking, there’s no way for you to know what percentage of your subscribers are having this bad experience.\n\nSo ditch the image CTA to make sure your subscribers can see and use your CTAs, no matter what device they’re using.\n\nWhat makes a beautiful button design?\n-------------------------------------\n\nButtons are more than just code, though. There are several factors that go into making your buttons usable and eye-catching.\n\n### Email button shape\n\nRule number one: make your buttons look like buttons.\n\nWe all like making fun and unique buttons, but often, if you stray too far from what’s expected, subscribers will miss the intent—and not take action. Yes, the words may say something is clickable, but as they say, “A picture is worth a thousand words.”\n\n![examples of standard email button shapes](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201224%20530'%3E%3C/svg%3E)\n\n![examples of standard email button shapes](https://www.litmus.com/wp-content/uploads/2017/11/button_shapes.png)\n\nUse standard button shapes to ensure you catch people’s attention, especially if they’re scanning. Standard shapes include:\n\n* Rounded corners\n* Square corners\n* Pill shaped\n* Ghost button\n* Shadowed button\n\nThat isn’t to say you can’t do fun things with buttons. Magic Spoon added some fun [animated GIFs](https://www.litmus.com/blog/a-guide-to-animated-gifs-in-email/) to their buttons to draw even more attention to them.\n\n![magic spoon example of email buttons with animated GIFs](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20640%20453'%3E%3C/svg%3E)\n\n![magic spoon example of email buttons with animated GIFs](https://www.litmus.com/wp-content/uploads/2017/11/ScreenRecording2021-04-08at01.27.57PM.gif)\n\n### Email button size\n\nWith over 40% of subscribers opening emails on mobile devices, according to our [State of Email Engagement report](https://www.litmus.com/resources/state-of-email-engagement/), it’s important that your button is designed so it works across all devices.\n\nIf your button is too small, it will be hard to click on mobile devices. If it’s too large, it looks less like a button and more like a design element.\n\nThe ideal size for buttons for easy clicking on mobile devices has been translated to be between [42px and 72px](https://uxmovement.com/mobile/optimal-size-and-spacing-for-mobile-buttons/) (approximately 11-19mm). This seems about average for button height seen around the web, and the buttons we use here at Litmus fall within that range as well.\n\n### Email button space and padding\n\nMake sure there’s enough whitespace around your buttons, too, so they stand out. This also makes it easier for your subscribers to click the correct button.\n\nThe best example of this would be an email with several links in one paragraph. If you bunch your links close together, your subscribers are never going to accurately click on what you want them to click on, especially on mobile.\n\n### Visual feedback\n\nNot every email client supports [interactive emails](https://www.litmus.com/blog/interactive-emails-top-trend-anyone-using/), but where possible, adding a little interactivity to provide visual feedback helps subscribers know their interaction has been registered.\n\nIt’s an extra sign to them that something is clickable.\n\nThis can be as simple as a change in color or more complex depending on your preference. (We know sometimes it’s fun to go all out, so don’t hold back—but also know when to rein yourself in.)\n\nOur own standard button has a color change as well as a push-button effect.\n\nBut we did try something new, too, and had a lot of fun with our January newsletter buttons. A great design element that was also fun to “push.”\n\n### Email button text and font size\n\nKeep your actual CTA copy or label actionable and to the point. Tell subscribers what you want them to do as clearly and concisely as possible.\n\nOne to five words is usually enough.\n\nThat length also keeps your email scannable. And if you have more to say? Include it in a headline over the button. By regularly keeping CTAs within one to five words, it makes the rare moment that you do go over it stand out in a much more meaningful way.\n\nData-driven email success\n\nMake smarter decisions with rich, reliable data. Understand subscriber behavior and boost your ROI.\n\n[Try email analytics](https://www.litmus.com/email-analytics)\n\n![](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20210%20180'%3E%3C/svg%3E)\n\n![](https://www.litmus.com/wp-content/uploads/2024/07/blog-cta-email-guardian-07292024.svg)\n\n5 ways to code a bulletproof CTA button\n---------------------------------------\n\nWith over [300,000 potential email renderings](https://www.litmus.com/blog/why-testing-the-rendering-of-every-email-you-send-increases-your-roi/), is it really surprising you can’t make one-size-fits-all button styles that work everywhere?\n\nWhat you can do is make a button that works _almost_ everywhere. And there are a few different methods for creating these buttons depending on your needs. Take a look through these to figure out which one works best to support your subscribers.\n\n### 1\\. Conditional-padding button\n\nThanks to [Mark Robbins](https://www.goodemailcode.com/email-code/link-button) for this conditional-padding button. It’s the one we use here at Litmus.\n\n![conditional email button](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201224%20366'%3E%3C/svg%3E)\n\n![conditional email button](https://www.litmus.com/wp-content/uploads/2017/11/conditional-button.png)\n\nThis button uses styling on the link to style it for everyone except Outlook. Then, it uses conditional code to add Outlook-specific padding and border-radius. Since the Outlook padding is controlled separately, you can edit the Outlook padding without impacting what the button looks like in other email clients.\n\nPlain text\n\nCopy to clipboard\n\nOpen code in new window\n\nEnlighterJS 3 Syntax Highlighter\n\n\n\nI am a button →\n\n\n\n\n\n I am a button → \n\n\n I am a button →\n \n \n\n ![Litmus Email Guardian icon](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20244%20244'%3E%3C/svg%3E)\n\n![Litmus Email Guardian icon](https://www.litmus.com/wp-content/uploads/2023/10/emailguardianicon.png)\n\n**Did it work?**\n\nBroken is not a good look. Prevent email errors and protect your brand reputation with Litmus Email Guardian. And ensure you send on-brand, error-free emails—every time.\n\n[Learn more →](https://www.litmus.com/email-guardian)\n\n#### Pros of conditional-padding buttons\n\n* There’s great support in most email clients ([see table below](https://www.litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design#supporttable)).\n* The entire button itself is clickable.\n\n#### Cons of conditional-padding buttons\n\n* It requires playing around with the conditional code and tags to get the padding exactly right in Outlook.\n* The Outlook version has squared corners, no matter what.\n\n### 2\\. VML-based buttons\n\nThis traditional approach to bulletproof buttons was popularized by [Stig](https://twitter.com/stigm), a developer at Campaign Monitor.\n\n![vmlbutton](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201220%20360'%3E%3C/svg%3E)\n\n![vmlbutton](https://www.litmus.com/wp-content/uploads/2017/11/vmlbutton.png)\n\nThis approach uses styling on the link itself to structure and style the button for most email clients. Structure is supplied via padding.\n\nAs a fallback for Microsoft Outlook, Vector Markup Language (VML) is used within an Outlook-specific conditional comment. The VML creates a box around the link in Outlook, then styles the anchor tag to create the button design for everyone else.\n\nThanks to [Wilbert Heinen](https://codepen.io/wilbertheinen/pen/MWmwqJg) for the code:\n\nPlain text\n\nCopy to clipboard\n\nOpen code in new window\n\nEnlighterJS 3 Syntax Highlighter\n\n\n\n\n\nI am a button →\n\n\n\n\n\n

\n\n

\n \n I am a button →\n \n

\n\nFor more complex versions of this button, you would actually create two versions of the button—one in VML and one for everything else.\n\n#### **Pros of VML-based buttons**\n\n* There’s great support in most email clients ([see table below](https://www.litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design/#supporttable)).\n* The entire button itself is clickable.\n* Rounded corners are maintained in Outlook.\n\n#### **Cons of VML-based buttons**\n\n* It relies on the use of an unfamiliar language—VML—that’s proprietary for the Microsoft Office suite, which makes creating new bulletproof buttons and updating existing ones time-consuming and frustrating.\n* More complex versions of the VML button require two URLs that need to be changed. And some ESPs don’t track the URL in the VML section.\n\n### 3\\. Padding-based buttons\n\n![padding email button](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201222%20356'%3E%3C/svg%3E)\n\n![padding email button](https://www.litmus.com/wp-content/uploads/2017/11/padding.png)\n\n \nThis method uses a simple HTML table for the button. It relies on padding at the table cell level to structure the button as well as HTML attributes and CSS to style the button.\n\nPlain text\n\nCopy to clipboard\n\nOpen code in new window\n\nEnlighterJS 3 Syntax Highlighter\n\n\n\n\n\n

\n\nI am a button →\n\n\n\n\n\n\n\n

I am a button →

\n\n\n \n \n \n

\n I am a button →\n

** to fill the entire background of the link. The background color needs to be applied to the **

** instead of the **** in this instance because Outlook doesn’t recognize horizontal padding on the **** tag (since it doesn’t support such styling for non-block-level HTML elements).\n\nPlain text\n\nCopy to clipboard\n\nOpen code in new window\n\nEnlighterJS 3 Syntax Highlighter\n\n\n\n\n\n

\n\nI am a button →\n\n\n\n\n\n\n\n

I am a button →

\n\n\n \n \n \n

\n I am a button →\n

\n\n#### Pros of padding-and-border buttons\n\n* Only one button needs to be coded, which makes buttons using this technique easy to update.\n* Specific dimensions for the buttons are not required.\n* Background images can be supported with this method.\n\n#### Cons of padding-and-border buttons\n\n* Styling is separated between a **

** and ****, so both need to be updated when there are changes in style for the button.\n* Outlook doesn’t support rounded corners.\n\n### Semantic HTML email buttons?\n\nWe love using semantic html, but unfortunately, the **

www.litmus.com

Summary

Associated Brands

IAB Categories

IAB Ad Products

Tags

Creatives