如何在邮件HTML报告中嵌入CSS样式按钮？

邮件HTML的样式兼容逻辑和普通网页不同，下面是两种实用的整合方案，兼顾兼容性和操作便捷性：

方法1：嵌入内部样式表（适配多数现代邮件客户端） #

如果你的邮件HTML包含<head>标签，直接把写好的.BUTTON_SPY样式放进<style>标签内；如果没有<head>，就在<body>最开头添加<style>块。之后在需要放置按钮的位置，给<a>（推荐用链接做邮件按钮，兼容性更好）或<button>标签加上class="BUTTON_SPY"即可。

示例代码：

<head>
  <style>
    /* 你已编写好的按钮样式 */
    .BUTTON_SPY {
      background-color: #2563eb;
      border: none;
      color: #ffffff;
      padding: 12px 24px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 14px;
      border-radius: 4px;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <!-- 邮件原有内容 -->
  <p>您好，以下是本周的邮件报告摘要：</p>
  <!-- 添加按钮 -->
  <a href="https://your-report-url.com" class="BUTTON_SPY">查看完整报告</a>
  <!-- 邮件其他内容 -->
</body>

方法2：内联样式（兼容老式邮件客户端如Outlook） #

部分邮件客户端（比如桌面版Outlook）对内部样式表支持很差，这时候可以把.BUTTON_SPY里的所有CSS属性直接写到标签的style属性中，确保样式能正常渲染。

示例代码：

<body>
  <!-- 邮件原有内容 -->
  <p>您好，以下是本周的邮件报告摘要：</p>
  <!-- 内联样式的按钮 -->
  <a href="https://your-report-url.com" style="background-color: #2563eb; border: none; color: #ffffff; padding: 12px 24px; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; border-radius: 4px; font-family: Arial, sans-serif;">查看完整报告</a>
  <!-- 邮件其他内容 -->
</body>

邮件按钮的关键兼容提示 #

• 优先用<a>标签代替<button>：<button>在部分邮件客户端会被默认样式覆盖，显示效果混乱
• 避免复杂CSS属性：box-shadow、transform、transition这类属性多数邮件客户端不支持，尽量不用
• 圆角处理：桌面版Outlook不支持border-radius，如果需要兼容，可以去掉这个属性，或者接受在Outlook中显示直角按钮
• 测试验证：发送测试邮件到Gmail、Outlook、QQ邮箱等主流平台，确认按钮在不同客户端的显示效果

内容的提问来源于stack exchange，提问作者Bruno Heredia