Hide floating button on a particular page

Hi

I have added a floating button on my website using the code below, now I want to hide this on a particular page, how do I do it? Thanks in advance!

<!-- HTML FOR BUTTON -->
<div id="book-me">
  <a href="/specialoffer"> ★ GAP free Special Offer! </a>
</div>

/*STYLES FOR FLOATING BUTTON*/
#book-me {
  position: fixed;
  top: 50%;
  left: 0;
  transform: rotate(270deg) translateX(-50%);
  transform-origin: 0% 0;
  z-index: 99999;
}
#book-me a {
  background: #8EC63F;
  color: black;
  display: inline-block;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  font-family: futura-pt;
  padding: 10px 30px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  letter-spacing: 2px
}
@media screen and (max-width: 960px) {
  #book-me {
    bottom: 0;
    top: auto;
    transform: none;
  }
  #book-me a {
    padding: 10px 30px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
  }
}

Hello!

The simplest way is to nest this code inside the page-IDs that you want it to appear and omit the page-ID where you don't want it to appear?

For that page where you want to hide it, you might want to set "display:none;" to be safe as well -- all depends on how you inserted the code.

Best,

Dan

Edit page (page where you want to hide it) > Add a Code Block at bottom of page >> Paste this code into Code Block

<style>
  #book-me {display: none !important;}
</style>

(All Plans, include Personal Plan, support Code Block)

On 6/1/2022 at 1:28 PM, tuanphan said:

Edit page (page where you want to hide it) > Add a Code Block at bottom of page >> Paste this code into Code Block

<style>
  #book-me {display: none !important;}
</style>

(All Plans, include Personal Plan, support Code Block)

Hi @tuanphan

Thank you so much, this works perfectly! My apologies for the delayed response.