css 如何在HTML邮件模板中添加cursor:pointer属性,现在无法使用

bbmckpt7  于 5个月前  发布在  其他
关注(0)|答案(2)|浏览(77)

我正在制作电子邮件HTML模板,剩下的就是给按钮添加光标:指针属性。下面是我有一个按钮的部分:

<span style="
        display: block;
        text-align: center;
        justify-content: center;
        align-items: center;
      ">
      <button
        type="button"
        style="
          text-align: center;
          justify-self: center;
          border: 3px solid #ea2a46;
          color: #ea2a46;
          font-size: 16px;
          font-weight: 600;
          border-radius: 10px;
          background-color: #ffffff;
          padding: 10px 15px;
          cursor: pointer !important;
        "
      >
        Activate account
      </button>
    </span>

字符串
我对type=“button”和“submit”都进行了测试。
虽然在代码中我们可以看到添加了cursor:pointer属性,但是在元素的dev工具中看不到该属性,请检查以下内容:

你能建议一下怎么修吗?

gg0vcinb

gg0vcinb1#

在电子邮件布局中使用<button>根本没有意义。因为您将无法发送表单或处理任何js事件。相反,使用<a>标记,该标记将具有cursor:pointer并为其添加必要的样式。

qojgxg4l

qojgxg4l2#

你不能操作gmail的光标css选项,尽管它在其他邮件客户端中会显示。然而,gmail将更改为所有a标签的指针。不要使用按钮,你应该创建一个div,其高度/宽度为按钮的大小,以及你想要的边框和背景颜色。只要你使用以下结构,div将定义可点击区域的大小:

<a href="LINK" target="_blank">
      <div id="div_name">
              BUTTON TEXT
      </div>
</a>

字符串
你可能还想在div中包含一些css来使文本居中,像这样:

line-height: 48px;  //this line height is the full height of the button, to perfectly center ONE line of text
    display: flex;
    flex-direction: column;
    align-items: center;

相关问题