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

如何解决如何将悬停状态添加到 Typeform HTML 按钮？

感谢观看！

我想使用 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>

解决方法

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

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

这是完整的片段：

(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>