Email CTA Playbook v1

A focused companion to the Effects Reference Matrix. Where the matrix tells you what you can build per email archetype, this doc tells you what gets clicked — drawing on 2026 benchmark data, recent A/B test results, and current best practices across text-based, HTML, and image-based emails.

Why this doc exists

The matrix tells you what effects are technically possible in each email archetype (E-txt / E-html / E-img). It doesn't tell you which CTA patterns actually convert. This doc closes that gap with:

The numbers that matter (2026 benchmarks)

Anchor data so you know what "good" looks like before optimizing:

What individual changes move CTR (replicated across multiple 2026 studies):

The single biggest pattern: single primary CTA wins. The jam study (Iyengar/Lepper, replicated dozens of times): 6 options converted at 30% vs 3% for 24 options. Decision fatigue kills clicks. One ask per email.

Universal CTA copy framework

Before format-specific tactics, the copy itself. These apply to every archetype:

Verb choice

High-agency verbs that consistently win: Claim, Unlock, Reserve, Activate, Get, Start, Grab, Build, Pick, Try, Send, Show me

Passive/low-agency verbs that consistently lose: Submit, Continue, Learn More, Click Here, Read More, Find Out

The pattern: high-agency verbs imply the reader is doing something with a clear outcome. Passive verbs put the work on the reader to figure out what happens next.

Specificity

Weaker Stronger
Get a quote Get a free custom quote in 24 hours
Start your trial Start your 14-day free trial
Read the article Read the 8-minute breakdown
Save money Save $40 on your first order
Sign up Save my seat

Specificity gives the reader a measurable expectation. "Get a Free Custom Quote in 24 Hours" drove a 30% conversion lift in a 2025 software services campaign by adding the time-bound specificity to a generic "Get a Quote."

Outcome-focused vs feature-focused

Anchor on what the reader gets, not what your product does:

First-person possessive (sometimes)

"Start my trial" sometimes outperforms "Start your trial" — the framing puts the reader in possession of the outcome. Test before adopting, results are inconsistent across categories; B2C consumer products see bigger lifts than B2B.

Numbers and dollars in the CTA

Buttons with numbers reliably beat buttons without:

Words to ban (or use with intent)

CTA-as-question

For cold outreach or top-of-funnel: questions reliably double reply rates. "Open to a 15-min call?" outperforms "Schedule a call." Save this for early-funnel and reply-driven CTAs; mid/late-funnel still wants imperative verbs.

The first/last-mile rule

The first ~25 characters of your CTA matter most on mobile (the rest may truncate or wrap awkwardly). Front-load the verb + outcome. "Reserve your spot for Friday" beats "For Friday, reserve your spot."

Text-based email CTAs (E-txt)

Live HTML text only. No buttons, no images. The aesthetic is Morning Brew / Stratechery / Lenny / Stripe Press / paulgraham.com. Signature comes from typographic discipline, copy quality, and structural rhythm.

The CTA patterns below are ranked roughly by use frequency in high-performing text-based newsletters in 2026.

Pattern 1: The bracketed inline CTA

→ Read the full breakdown

or

[ Read the full breakdown → ]

Single line, indented or centered, arrow as visual cue, hyperlinked text. Works because it interrupts paragraph rhythm without breaking the text aesthetic.

Variations:

Pattern 2: The inline body link

Hyperlinked phrase embedded in flowing copy:

If you want the full methodology, I wrote up the 12-step framework here.

Highest contextual relevance, lowest visual interruption. Best for newsletters where the link is mentioned naturally in service of the argument. Works because the reader's already engaged with the surrounding sentence.

Performance note: link color matters here. Default blue underline reads as "link" instantly; styled custom colors look cleaner but reduce click intent. For text-based, lean into the default blue — it signals interactivity.

Pattern 3: The P.S. CTA

The single highest-converting placement in long-form text-based emails:

P.S. — If you only have 30 seconds today, this is the one thing worth reading.

The P.S. line is where the reader's eye lands second-most after the opening line. Direct-response copywriters have known this for 50 years; data backs it up — P.S. CTAs in long-form text emails reliably pull 2–3x the click rate of body-text CTAs.

Variants:

Pattern 4: The reply-driven CTA

Instead of clicking out, ask for a reply:

If this resonates, just hit reply and tell me which part. I read everything.

Reply CTAs are technically "no-click" but they're the highest-engagement signal in email. They:

Use this when the goal is relationship over conversion. Substack newsletters, founder updates, thought leadership digests.

Pattern 5: The single-link minimalist

The entire email exists to deliver one link. Stratechery and Lenny's Newsletter use this pattern weekly:

Today's piece: [Why every SaaS company is now an AI company]

[Read it here →]

See you Thursday, [Name]

No body. No preamble. The headline IS the hook. Works only when your brand has earned the right to skip the pitch.

Pattern 6: The section divider lead-in

For longer text emails with multiple CTAs:

━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📊  THE NUMBERS THIS WEEK
━━━━━━━━━━━━━━━━━━━━━━━━━━━━

[Body content]

→ See the full report

The Unicode-character divider + section label creates a visual rest, signals a topic shift, and earns a fresh CTA. Use this for digest-style newsletters covering multiple items.

Pattern 7: The indented quote-block CTA

Inline <blockquote> for emphasis:

<blockquote style="border-left: 3px solid #1a1a1a; padding-left: 16px; margin: 24px 0;">
  Want the full template?<br>
  <a href="#">Get the free download →</a>
</blockquote>

Renders as an indented quote with a colored left bar. Even in text-mode this reads as styled while staying within HTML-text-only constraints. Good for one mid-body CTA.

Pattern 8: The numbered list close-out

End a numbered list with the action:

  1. Audit your current flow
  2. Identify the drop-off step
  3. Test the new copy variant
  4. Get the audit template →

Reader builds momentum down the list; the CTA is the natural next step. Works because it leverages the list's existing visual hierarchy.

Pattern 9: Footer-only CTA

For relationship-style emails (founder updates, thought leadership):

━━━━━━━━━━━━━━━━━━━━━━━━━━━━

[Name] [Title], [Company] [linkedin.com/in/name] · @handle

P.S. → New essay every Thursday. Subscribe if you want it.

The CTA is the lowest-pressure offer, placed where the reader is already inspecting your identity.

Placement strategy for text-based

What to avoid in text-based

Builder presets for E-txt

Six worth shipping:

  1. Inline link (default body-text hyperlink)
  2. Arrow CTA (single line, → Text here)
  3. Bracketed button ([ Text → ] ASCII button feel)
  4. P.S. line (P.S. — [CTA] template)
  5. Blockquote CTA (indented with colored left bar)
  6. Reply prompt (Just hit reply with [X])

HTML email CTAs (E-html)

The classic coded approach. Real buttons rendered in HTML/CSS, mix of live text and images, inline styles, table-based layout. Best of both worlds when done right.

The button taxonomy

Five button types worth knowing, ranked by client compatibility:

Type 1: VML bulletproof button (the gold standard)

Renders identically across Apple Mail, Gmail, Outlook 2007–2024, Yahoo, ProtonMail. The only button type that survives Outlook's MSO rendering engine.

<table border="0" cellspacing="0" cellpadding="0" style="margin: 0 auto;">
  <tr>
    <td align="center" bgcolor="#1a1a1a" style="border-radius: 4px;">
      <!--[if mso]>
      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
                   xmlns:w="urn:schemas-microsoft-com:office:word"
                   href="https://example.com"
                   style="height:48px;v-text-anchor:middle;width:240px;"
                   arcsize="8%" stroke="f" fillcolor="#1a1a1a">
        <w:anchorlock/>
        <center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">
          Get the free guide
        </center>
      </v:roundrect>
      <![endif]-->
      <!--[if !mso]><!-->
      <a href="https://example.com"
         style="background-color: #1a1a1a;
                border: 1px solid #1a1a1a;
                border-radius: 4px;
                color: #ffffff;
                display: inline-block;
                font-family: Arial, sans-serif;
                font-size: 16px;
                font-weight: bold;
                line-height: 48px;
                text-align: center;
                text-decoration: none;
                width: 240px;
                -webkit-text-size-adjust: none;
                mso-hide: all;">
        Get the free guide
      </a>
      <!--<![endif]-->
    </td>
  </tr>
</table>

This is the universal default. Build all other patterns starting from this.

Type 2: Padding-based button (simpler, slightly less Outlook-perfect)

No VML, uses table cell padding for shape. Works in Apple Mail, Gmail, Outlook.com (web), most clients. Outlook 2007–2019 desktop will render it as a flat rectangle without rounded corners but the button still works.

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" bgcolor="#1a1a1a"
        style="border-radius: 4px; padding: 14px 28px;">
      <a href="https://example.com"
         style="color: #ffffff;
                font-family: Arial, sans-serif;
                font-size: 16px;
                font-weight: bold;
                text-decoration: none;
                display: inline-block;">
        Get the free guide
      </a>
    </td>
  </tr>
</table>

Use this when VML feels like overkill (founder-led, brand-loose newsletters). Skip for revenue-critical campaigns where Outlook subscribers matter.

Type 3: Border-based button

The button shape comes from border: solid rather than padding. Older technique, mostly superseded by padding-based. Useful only when you specifically need a transparent center (the now-unfashionable "ghost button"). Skip for most cases — ghost buttons consistently underperform solid-fill in click testing.

Type 4: Full-width mobile button

For mobile-heavy lists. Full bleed at narrow viewports, fixed-width on desktop:

<table border="0" cellspacing="0" cellpadding="0" width="100%">
  <tr>
    <td align="center" style="padding: 0 20px;">
      <table border="0" cellspacing="0" cellpadding="0" width="100%"
             style="max-width: 320px;">
        <tr>
          <td align="center" bgcolor="#1a1a1a"
              style="border-radius: 4px; padding: 16px 24px;">
            <a href="https://example.com"
               style="color: #ffffff;
                      font-family: Arial, sans-serif;
                      font-size: 18px;
                      font-weight: bold;
                      text-decoration: none;
                      display: block;">
              Get the free guide →
            </a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

width="100%" + max-width: 320px means it fills mobile screens edge-to-edge but caps at a reasonable desktop width. Pair with VML for Outlook if needed.

Type 5: Personalized button (merge tags)

The +202% lift pattern:

<a href="https://example.com">
  Continue your trial, {{ first_name|default:"there" }} →
</a>

or for offer personalization:

<a href="https://example.com">
  Claim your {{ discount_amount }} off →
</a>

In Klaviyo: use {{ first_name|default:"there" }} (Django syntax). Always include a default fallback — broken merge tags read as "Hi {first_name}," and tank trust instantly.

Dark mode-proof button (the white border trick)

Around 40% of opens happen in dark mode. Three behavior tiers per Litmus:

  1. No change: Apple Mail, Gmail desktop — your design ships as-is
  2. Partial invert: Outlook.com — light backgrounds darken
  3. Full invert: Gmail iOS, Outlook 2021 — everything inverts including buttons

Your bold-red button on white background becomes invisible (red on red) or worse (white text on light pink background) in tier 3 clients.

The fix:

<!-- Add a 1-2pt white border to preserve button shape during inversion -->
<a href="https://example.com"
   style="background-color: #cc0000;
          border: 2px solid #ffffff;
          color: #ffffff;
          /* ...rest of styles */">
  Get the free guide
</a>

The white border ensures the button silhouette stays visible even when background colors invert.

Additional dark mode rules (from Klaviyo community + Email on Acid):

Animated buttons (Apple Mail only)

CSS animations work in Apple Mail. Everywhere else they fail silently to the static state. Useful as a progressive enhancement — Apple Mail users get the polish, everyone else gets the regular button.

<style>
  @keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
  }
  .cta-button {
    animation: pulse 2s ease-in-out infinite;
  }
</style>

Use sparingly — pulse animations cross into "screaming for attention" territory fast. Better candidates: subtle background gradient shift (1–2% color change), gentle hover-color-change (works on tap too on mobile).

Multi-CTA hierarchy (when one CTA isn't enough)

Newsletters and digest emails need multiple paths. The rule: one visual primary CTA per topic block, secondary CTAs as text links.

[Hero image]

The Big Story This Week
Lorem ipsum dolor sit amet, consectetur adipiscing elit...

[ Read the full breakdown → ]   ← PRIMARY (visual button)

━━━━━━━━━━━━━━━━━━━━━━━━━

Quick Hits
• [Story 1 link →](#)            ← SECONDARY (text links)
• [Story 2 link →](#)
• [Story 3 link →](#)

Visual hierarchy enforces "one primary action" without limiting the email to literally one link.

Sticky bottom CTA (Apple Mail only)

position: sticky works in Apple Mail for the persistent CTA pattern:

<div style="position: sticky; bottom: 0; background: #ffffff; padding: 16px;">
  [VML button here]
</div>

Outlook ignores, Gmail breaks. Use only when Apple Mail dominates your list and degradation to standard CTA placement is acceptable.

AMP for Email (interactive components)

Gmail and Yahoo support AMP for Email components — interactive CTAs that complete actions inside the inbox:

Currently ~40% of inboxes can render AMP for Email (Gmail consumer + workspace, Yahoo). Other clients fall back to the HTML version.

Worth the build effort for: webinar RSVPs, surveys, product carousels in newsletters. Not worth it for: most one-CTA campaigns where a regular button does the job.

CTA placement strategy for HTML

Common mistakes in HTML email CTAs

  1. Image-only buttons — block in Outlook = invisible CTA = no clicks
  2. Cramped tap targets — <44px height on mobile causes rage taps and misses
  3. Ghost buttons (transparent fill) — consistently underperform solid-fill across every study; sometimes vanish entirely in dark mode
  4. Multiple equal-weight CTAs — decision fatigue tanks all of them
  5. CTA below 3+ paragraphs of preamble — invisible on mobile first viewport
  6. No dark mode test — 40% of your audience may not see the button at all
  7. Generic copy ("Click here," "Submit") — leaves measurable revenue on the table
  8. Buttons without VML for Outlook — broken or invisible for ~20% of corporate audiences

Builder presets for E-html

Eight worth shipping:

  1. Bulletproof VML button (default for revenue campaigns)
  2. Padding-based button (simpler default for casual sends)
  3. Full-width mobile button (responsive default)
  4. Personalized button (with merge tag input)
  5. Dual button (primary + secondary side-by-side)
  6. Dark mode-proof button (with white border, HEX-only colors)
  7. Animated button (Apple Mail enhancement, static fallback)
  8. AMP form CTA (one-click action inside inbox)

Image-based / pure design CTAs (E-img)

The cardinal rule of E-img CTAs: never rely on an image-only CTA. 85% of email clients block images by default until the recipient opts in. If your CTA is baked into an image, blocked-image recipients see nothing. Even when images load, ~10–15% of subscribers experience load delays where they decide to act (or close) before the image renders.

The rule isn't "don't use image-based emails." It's "image-based emails still need a live HTML CTA as backup."

The hybrid pattern (the only safe image-based CTA approach)

Hero image + live HTML CTA below the image:

[Hero image with designed CTA inside it — visual reinforcement]

[Live HTML bulletproof button with same CTA copy — actual functional CTA]

The image's job: visual hook, brand expression, emotional drive. The HTML button's job: be the actual clickable target that works whether or not the image loads.

Match the copy exactly between image-CTA and HTML-CTA so a recipient who sees both doesn't second-guess which to click.

Styled ALT text fallback

When images are blocked, the ALT text shows up in the empty space. Most marketers leave ALT text unstyled (small gray text), missing a free conversion opportunity.

<img src="hero-cta-image.jpg"
     alt="Get the free 12-step framework →"
     width="600"
     height="300"
     style="display: block;
            background-color: #1a1a1a;
            color: #ffffff;
            font-family: Arial, sans-serif;
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            line-height: 300px;">

When the image loads, you see the image. When images are blocked, the ALT text renders as styled text inside the image's reserved space — bold white text on dark background, looking like an intentional design block. The recipient still has a clear CTA to click (since the entire image is wrapped in <a>).

Critical detail: wrap the image in <a href> so the ALT text becomes clickable text in fallback mode:

<a href="https://example.com">
  <img src="hero-cta-image.jpg" alt="Get the free framework →" ...>
</a>

Background-color fallback

Always set the background color of any cell containing an image. If the image fails or is blocked, the recipient sees the background color instead of a white void:

<td bgcolor="#1a1a1a" style="background-color: #1a1a1a;" align="center">
  <a href="https://example.com">
    <img src="hero.jpg" alt="Reserve your spot →" ...>
  </a>
</td>

If hero.jpg fails to load, the cell still renders as a dark filled space with the styled ALT text on top — close enough to the intended design that the email doesn't look broken.

Animated GIF CTAs

When the visual design demands motion (countdown, pulse, reveal), GIFs are the universal motion fallback for E-img.

Effective animated CTA patterns:

GIF technical rules:

Outlook gotcha: in Outlook desktop, your animated GIF renders only the first frame. Design as if the first frame is the only frame anyone might see. Then add motion as an enhancement for other clients.

Image-mapped click areas

When a single hero image has multiple targets (product collage, calendar grid, story grid), <map> and <area> define separate clickable regions:

<img src="product-grid.jpg" alt="Shop the collection" usemap="#product-map">
<map name="product-map">
  <area shape="rect" coords="0,0,300,300" href="#product1" alt="Black coat">
  <area shape="rect" coords="300,0,600,300" href="#product2" alt="Brown boots">
  <area shape="rect" coords="0,300,600,600" href="#product3" alt="Wool scarf">
</map>

Renders correctly in Apple Mail, Gmail web, most mobile clients. Outlook desktop ignores image maps (treats the whole image as one link). For multi-region CTAs in Outlook-heavy lists, slice the image into separate <img> blocks instead of using <map>.

Above-fold + below-fold strategy

For E-img emails over 800px tall:

This handles every reader behavior: scroll-and-act, scan-and-act, deep-read-and-act.

Common mistakes in image-based emails

  1. CTA inside the image with no HTML backup — invisible to image-blockers, ~20% of your list never sees it
  2. No ALT text — image-blocked recipients see broken icons and bail
  3. Unstyled ALT text — wasted real estate; styled ALT text doubles as a fallback CTA
  4. No background color on image cells — emails look broken when images fail
  5. Single 800×1200px image as entire email — spam filter trigger, screen reader hostile, mobile load times suffer, dark mode catastrophic
  6. Image-only animated CTA — Outlook freezes on first frame; if your CTA copy only reads on frame 3, Outlook users see something else
  7. Image-mapped CTAs without slice fallback — Outlook desktop treats the entire image as one URL, defeating the multi-region intent

The 60/40 rule

Even for "image-based" emails, the modern best practice is 60% images / 40% live text. Pure 100% image emails trigger Gmail/Yahoo spam filters explicitly (they can't read the content, so they assume the worst). The 60/40 split:

Builder presets for E-img

Six worth shipping:

  1. Hero image + HTML button below (the default safe pattern)
  2. Styled ALT text image (with HEX colors, font sizing, background)
  3. Animated GIF + static button below (first-frame-safe design)
  4. Image map multi-CTA (with sliced-image fallback toggle)
  5. Background-color slice block (image + bg color + ALT text triple-fallback)
  6. Above-fold + below-fold repeat pattern (two-CTA template)

Cross-format: what always increases click rate

These principles apply regardless of which archetype you're building:

Personalization tokens

+202% CTR lift over generic CTAs. At minimum:

Avoid: generic personalization that reveals it's automated ("Hi John, as a valued customer..."). The personalization should feel earned, not bolted on.

Single primary CTA per email

The jam study replicates dozens of times across every category. One ask wins.

Exception: digest newsletters where each section has its own CTA, but each section's CTA is the only ask within that section. This is one-CTA-per-block, not one-CTA-per-email.

Mobile thumb zone

On a phone held one-handed, the bottom-center third of the screen is where the thumb naturally rests. CTAs placed in that zone get +17% additional click lift (Google Mobile UX Benchmarking, 2026, 2.3M sessions).

For email: bottom-of-email CTA placement matters more than top-of-email when mobile share is high. The hero CTA captures scan-readers; the bottom CTA captures scroll-readers in the thumb zone.

48×48px minimum tap target

Apple HIG. Recipients with imprecise tapping (kids, older users, people on the move) miss smaller buttons constantly. 48×48 is the floor; 48–56px height with full-width mobile layout is the modern default.

Color contrast

Baymard's 2026 e-commerce test, 320 checkout pages, 48 button color variants:

The mechanism isn't "red is better" — it's that red/orange contrast strongly against typical white/light backgrounds. On dark backgrounds, the relationship flips: bright cool colors win.

The rule isn't "always use red." It's "always maximize contrast between button and background." A red button on a red background converts worse than a yellow button on a black background.

Real urgency over fake urgency

Real urgency: limited spots, real deadline, genuine inventory constraint. Fake urgency: "Only X left!" repeated weekly, perpetual "ending soon" CTAs, fake countdown timers.

Real urgency lifts CTR. Fake urgency tanks long-term sender reputation and click rates after subscribers catch on (typically 2–3 emails in).

Inline social proof near CTA

"Used by 12,000 teams" placed immediately above the CTA outperforms the same line placed elsewhere in the email. Social proof works best at the moment of decision — which is the moment before clicking.

Patterns that work:

Specificity in copy

"Save 4 hours this week" beats "Save time." "Get matched in 24 hours" beats "Get matched quickly." "$200 off your first 3 months" beats "Special discount."

Numbers, time bounds, and outcomes beat abstractions every time.

Reply-driven CTAs (founder-led email)

For founder-direct, thought-leadership, or B2B sales emails: a reply CTA can outperform a click CTA by 3–10x on engagement (replies > opens > clicks as engagement signals).

Pattern: "If this resonates / if you want X / if you've experienced Y — just hit reply with [specific question]." The specific question prevents "yes" replies that go nowhere; it forces the reader to do something useful.

Klaviyo-specific notes

Since most of this ships from Klaviyo, the platform-specific quirks worth knowing:

Button block limitations

Klaviyo's drag-and-drop button block is not bulletproof for Outlook. Confirmed by Klaviyo support in 2026 community threads: their button block renders correctly in Apple Mail, Gmail (web + mobile), and Outlook web, but disappears or renders incorrectly in Outlook desktop (2007–2019) without manual VML.

The workaround: build CTAs as a code block with the VML pattern from earlier in this doc. Klaviyo accepts inline HTML in code blocks and preserves it on send.

Dynamic merge tags

Klaviyo's merge tag syntax uses Django templating:

{{ first_name|default:"there" }}
{{ event.placed_orders|length }}
{{ profile.location.city|default:"your area" }}

Always include |default: fallbacks. Broken merge tags ("Hi {{ first_name }},") are the #1 trust-destroying error in personalized email.

Subject line + CTA alignment

Klaviyo's reporting separates subject line A/B testing from CTA A/B testing. The mistake teams make: testing both at once and being unable to attribute lifts.

Sequence the testing: subject line first (until you have a winner), then CTA copy (until you have a winner), then CTA design (color, size, placement). Each test runs against the established winner from the previous round.

Dark mode handling in Klaviyo

Klaviyo's default templates render OK in dark mode but don't apply the white-border trick automatically. For revenue-critical templates:

Flows vs campaigns

Welcome flows pull 5.58% CTR vs 1.69% for campaigns — a 3.3x gap. The CTA optimization rules apply to both, but the highest-ROI place to spend time is welcome flow CTA refinement, not yet-another-campaign tweak.

Specifically: the first email in any flow is your highest-leverage CTA in the entire program. Spend disproportionate optimization time there.

Testing framework

One variable at a time. Build the discipline:

  1. Subject line first — until you have a 2x performance subject line against your baseline. Test for 4–6 sends before declaring a winner.
  2. CTA copy next — same baseline, vary only the button copy. Test 3–4 variants against the current winner.
  3. CTA color/contrast third — only after copy is locked. Red/orange vs current; full-width vs current.
  4. CTA placement fourth — above fold vs repeated; P.S. line included vs excluded.
  5. Email-level structure fifth — long vs short body; image-heavy vs text-heavy; hero image vs text-only opener.

Each round confirms or replaces the previous winner. Don't test more than one variable at a time or you can't attribute the lift.

Mobile-first testing

Always preview mobile first. Desktop is the test, not the primary view. ~85% of your opens happen on phones.

Dark mode preview before send

Mandatory step. Tools:

If you can't see your CTA clearly in dark mode preview, no one in dark mode can see it either.

Builder presets to ship

Twenty CTA presets worth building into the design builder, organized by archetype:

E-txt presets (6)

  1. Inline body link (default styling)
  2. Arrow line CTA (→ Text here)
  3. Bracketed button ([ Text → ])
  4. P.S. line CTA template
  5. Blockquote CTA (indented + colored bar)
  6. Reply prompt template

E-html presets (8)

  1. Bulletproof VML button (universal default)
  2. Padding-based button (simpler default)
  3. Full-width mobile button (responsive)
  4. Personalized button (merge tag input)
  5. Dual button (primary + secondary)
  6. Dark mode-proof button (white border + HEX-only)
  7. Animated button (Apple Mail enhancement)
  8. AMP form CTA (Gmail/Yahoo one-click action)

E-img presets (6)

  1. Hero image + HTML button below (default safe pattern)
  2. Styled ALT text image (full HEX + font fallback)
  3. Animated GIF + static button below (first-frame-safe)
  4. Image map multi-CTA (with sliced fallback toggle)
  5. Background-color slice block (triple-fallback)
  6. Above-fold + below-fold repeat pattern

Each preset should expose

Quick reference: the matrix you can hand to a copywriter

Situation Best CTA pattern
Long-form text newsletter (founder, thought leadership) P.S. line CTA + 1 inline body link
Single-link digest (Stratechery-style) Single-link minimalist
Welcome flow first email Personalized VML button, above fold + P.S. backup
Promotional / discount campaign Personalized VML button with {{ discount_amount }} token, red/orange color, repeated bottom
Newsletter with multiple sections Visual primary CTA per topic block + text-link secondary CTAs
Founder-direct B2B email Reply-driven CTA + 1 inline link
Webinar / event invite AMP form one-click RSVP for Gmail/Yahoo + VML button fallback
Cold outreach (B2B) Question CTA in P.S. line ("Open to a 15-min call?")
Image-based campaign (Black Friday, product launch) Hybrid: hero image + live HTML button below + styled ALT text fallback
Transactional (order confirmation, shipping update) Single padding-based button, no urgency, single action verb
Long-form content email (case study, deep dive) Section divider lead-in + inline link per section + P.S. close

Last verified against current trend reporting and benchmark data: May 2026. Companion to: Effects Reference Matrix v2.2.