如何为 Typeform HTML 按钮添加悬停状态？

Question

感谢观看！

我想使用 Typeform 提供的嵌入代码为我的表单创建一个按钮，并添加一个悬停状态。所以当光标在按钮上时，字体和按钮背景会改变颜色。

这是一个 Squarespace 网站。我正在使用代码块来添加这个按钮，所以我必须在这些限制范围内工作。

无悬停

• 背景颜色：#FFFFFF
• 字体颜色：#8957FE

悬停

• 背景颜色：#8957FE
• 字体颜色：#FFFFFF

Typeform提供的代码如下：

(function() {
  var qs, js, q, s, d = document,
    gi = d.getElementById,
    ce = d.createElement,
    gt = d.getElementsByTagName,
    id = "typef_orm_share",
    b = "https://embed.typeform.com/";
  if (!gi.call(d, id)) {
    js = ce.call(d, "script");
    js.id = id;
    js.src = b + "embed.js";
    q = gt.call(d, "script")[0];
    q.parentNode.insertBefore(js, q)
  }
})()

<center><a class="typeform-share button" href="TYPEFORM URL" data-mode="popup" style="display:inline-block;text-decoration:none;background-color:#8957FE;color:white;cursor:pointer;font-family:Poppins,sans-serif;font-size:18px;line-height:50px;text-align:center;margin:0;height:50px;padding:5px 33px;border-radius:7px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;"
    data-size="100" target="_blank">Get Started For Free</a></center>

Answer 1

您可以通过为按钮的:hover 状态添加 CSS 来像处理任何其他 HTML 按钮一样执行此操作。由于按钮 CSS 是内联定义的，因此您需要使用 !important 来覆盖它。

a.typeform-share.button:hover {
  background-color: #8957FE !important;
  color: #FFFFFF !important;
}

这是完整的sn-p：

(function() {
  var qs, js, q, s, d = document,
    gi = d.getElementById,
    ce = d.createElement,
    gt = d.getElementsByTagName,
    id = "typef_orm_share",
    b = "https://embed.typeform.com/";
  if (!gi.call(d, id)) {
    js = ce.call(d, "script");
    js.id = id;
    js.src = b + "embed.js";
    q = gt.call(d, "script")[0];
    q.parentNode.insertBefore(js, q)
  }
})()

a.typeform-share.button {
  /* you could also set correct colors for default state when generating the snippet in Typeform share tab */
  background-color: #FFFFFF !important; 
  color: #8957FE !important;
  border: 1px #8957FE solid !important;
}
a.typeform-share.button:hover {
  background-color: #8957FE !important;
  color: #FFFFFF !important;
}

<center><a class="typeform-share button" href="TYPEFORM URL" data-mode="popup" style="display:inline-block;text-decoration:none;background-color:#8957FE;color:#;cursor:pointer;font-family:Poppins,sans-serif;font-size:18px;line-height:50px;text-align:center;margin:0;height:50px;padding:5px 33px;border-radius:7px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;" data-size="100" target="_blank">Get Started For Free</a></center>