htmlsquarespacetypeform

How to add a hover state to Typeform HTML button?

Thanks for taking a look!

I want to take the embed code Typeform provides to create a button for my form, and add a hover state. So when the cursor is over the button, the font and button background change colour.

This is for a Squarespace website. I am using the Code block to add this button, so I have to work within those constraints.

No hover

Hover

The code provided by Typeform is as follows:

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

Solution

  • You can do this as you would for any other HTML button by adding a CSS for :hover state of the button. Since button CSS is defined inline you will need to use !important to override it.

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

    Here is the full snippet:

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