如何在Gmail邮件悬停提示框中创建自定义按钮

你要实现的这类邮件悬停按钮，核心是基于AMP for Email技术——这是Google推出的支持在邮件中嵌入交互式元素的标准，GitLab在Gmail中的按钮就是用它实现的。

搜索关键词 #

直接搜以下关键词就能找到精准资料：

• AMP for Email 交互式按钮
• Gmail 邮件内嵌功能按钮

实现步骤 #

1. 遵循AMP邮件规范
   邮件的HTML必须声明为AMP邮件类型，开头要写：

   <!doctype html>
   <html amp4email>
   <head>
     <meta charset="utf-8">
     <script async src="https://cdn.ampproject.org/v0.js"></script>
     <style amp4email-boilerplate>body{visibility:hidden}</style>
   </head>
   

2. 使用AMP组件创建按钮
   用<amp-button>组件实现带悬停效果的按钮，结合CSS定义样式，同时可以搭配跳转逻辑处理操作：

   <body>
     <style amp-custom>
       .email-btn {
         padding: 8px 16px;
         border: none;
         border-radius: 4px;
         cursor: pointer;
       }
       .mr-btn {
         background-color: #6366f1;
         color: white;
       }
       .mr-btn:hover {
         background-color: #4f46e5;
       }
       .unsub-btn {
         background-color: #ef4444;
         color: white;
         margin-left: 10px;
       }
       .unsub-btn:hover {
         background-color: #dc2626;
       }
     </style>
   
     <amp-button class="email-btn mr-btn" on="tap:AMP.navigateTo(url='https://你的合并请求链接')">
       查看合并请求
     </amp-button>
     <amp-button class="email-btn unsub-btn" on="tap:AMP.navigateTo(url='https://你的取消订阅链接')">
       取消订阅
     </amp-button>
   </body>
   </html>
   

3. 兼容降级处理
   对于不支持AMP的邮箱，要提供普通HTML链接作为替代，比如用<noscript>标签包裹常规链接，确保所有收件人都能触发操作。

4. 邮箱验证要求
   发送AMP邮件需要通过收件邮箱服务商的验证（比如Gmail要求发件人域名完成DKIM、SPF验证，且在Google Search Console完成域名注册），否则邮件会被转为普通HTML显示。

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