如何为邮件模板中的按钮实现光标悬停时变色的效果？

注意：微软Outlook桌面版依赖VML渲染的按钮不支持悬停交互效果，该效果仅在支持:hover伪类的邮件客户端（苹果邮件、Gmail网页版、国内主流网页/移动端邮箱等）生效，不会影响Outlook客户端的原有按钮展示

具体修改步骤 #

• 在整个邮件HTML的<head>标签内添加如下嵌入式CSS样式，你可以根据需求自行调整悬停时的背景色、文字色、边框色取值，!important是为了覆盖标签行内样式，确保悬停样式生效：

<style type="text/css">
.cta-button:hover {
  background-color: #FFC107 !important;
  color: #ffffff !important;
  border-color: #1e3650 !important;
}
</style>

• 修改你现有按钮代码中的<a>标签，添加类名cta-button，修改后的完整按钮代码如下：

<div>
<!--[if mso]>
      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{!User.Calendly_Link__c}" style="height:32px;v-text-anchor:middle;width:150px;" arcsize="13%" strokecolor="#1e3650" fillcolor="#ffffff">
        <w:anchorlock/>
        <center style="color:#38383A;font-family:sans-serif;font-size:13px;font-weight:bold;">Schedule a meeting</center>
      </v:roundrect>
    <![endif]--><a href="{!User.Calendly_Link__c}"
  class="cta-button"
  style="background-color:#ffffff;
  border:1px solid #FFC107;
  border-radius:4px;
  color:#38383A;
  display:inline-block;
  font-family:sans-serif;
  font-size:13px;
  font-weight:bold;
  line-height:32px;
  text-align:center;
  text-decoration:none;
  width:150px;
  -webkit-text-size-adjust:none;
  mso-hide:all;"
  >Schedule a meeting</a>
</div>

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