时间戳

首页 > 解决方案 > 当光标悬停在按钮上时更改按钮颜色的代码

html - 当光标悬停在按钮上时更改按钮颜色的代码

问题描述

我正在创建一个带有按钮的电子邮件模板。当用户将鼠标悬停在按钮上时，我希望按钮改变颜色。

以下是我为该按钮提供的 HTML 代码。

<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}"
  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>

标签： html

解决方案

这是一个非常简单的示例，您可以参考：

HTML

<button type='button' class='btn' > Submit </button>

CSS

.btn {
  background-color: green;
  border: 1px solid white;
  padding: 10px;
  border-radius: 10px;
}

.btn:hover {
  background-color: blue;
  color: white;
  cursor: pointer
}

推荐阅读