Jump to content

How to have sticky button open in a new tab

Recommended Posts

Hi, I need help to make the link of this sticky button open in a new tab? 

This is the code in the header code injection:

<div id="book-me">
  <a href="https://bookings8.rmscloud.com/Search/Index/33FF1B3C43400007/1/"><svg class="olark-envelope-icon" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" focusable="false" role="img" fill="none"><rect x="3" y="7" width="26" height="18" rx="2" stroke="currentcolor" stroke-width="2" stroke-linejoin="round"></rect><path d="M7 11L16 17L25 11" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg> BOOK NOW </a>
</div>

 

This is the css:

#book-me {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 99999;

  background: #7D7E81;
  color: white;
  display: inline-block;
  font-size: 14px;
  font-weight: 100;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-family: MARIGOLD;
  writing-mode: vertical-rl;
  padding: 15px 10px;
}
#book-me svg {
  margin-right: 0px;
  margin-top: 0px;
  transform: rotate(180);
}

@media screen and (max-width: 960px) {


  #book-me svg {
  margin-right: 0px;
  margin-top: -10px;
    margin-bottom: 15px;
  transform: rotate(90);
}
  #book-me a {
    padding: 15px 10px;
  }

}

Screen Shot 2023-06-16 at 8.19.34 pm.png

Link to comment
  • Replies 2
  • Views 213
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.