Add hover color

Question

UPDATE,. I was able to edit the code into this? and when I load the website I can see the wanted button but it then change back into losing all the "style". Any clues what's wrong?

I was wondering if anyone knew how I could make this change color when hovering like you can do with a button? The button won't work right now since I have temporarily changed the "quid" and "ruid" to prevent spam. I want it so that when you hover over it, the whole button becomes white and the writing turns black. Thanks in advance!

Also needed to mention that this code gets added to a "code block" on Squarespace. So all changes must happen so inside the block.

<center>
<style>
#glfButton {
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 16px;
  background-color: transparent;
  color: white;
  font-size: 20px;
  text-align: center;
  cursor: pointer;
  border: 2px solid white;  
  font-weight: bold;
}

#glfButton:hover{
color: black;
background-color: white;

}
</style>
  
<span 
  data-glf-cuid="test" data-glf-ruid="test" data-glf-reservation="true" id="glfButton"> Reserver online!
</span>

<script src="https://www.fbgcdn.com/embedder/js/ewm2.js" defer async ></script>

Answer 1

Something in the script appears to be adding an integer to the id. Using a class seems to work reliably.

<center>
<style>
.glfButton {
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 16px;
  background-color: transparent;
  color: white;
  font-size: 20px;
  text-align: center;
  cursor: pointer;
  border: 2px solid white;  
  font-weight: bold;
}

.glfButton:hover{
color: black;
background-color: white;

}
</style>

<span data-glf-cuid="test" data-glf-ruid="test" data-glf-reservation="true" id="glfButton" class="glfButton"> Reserver online!
</span>

<script src="https://www.fbgcdn.com/embedder/js/ewm2.js" defer async ></script>

Answer 2

 #glfButton1 { padding-left: 30px; padding-right: 30px; padding-top: 20px; padding-bottom: 20px; font-size: 16px; background-color: transparent; color: blue; font-size: 20px; text-align: center; cursor: pointer; border: 2px solid white; font-weight: bold } #glfButton1:hover{ color: black; }