Add hover color-CodePudding

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>

CodePudding user response：

Looks like it's working. Might be a problem in your js file.

#glfButton {
  padding-left: 160px;
  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;

}

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

CodePudding user response：

#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;
}

  <span data-glf-cuid="TEST" data-glf-ruid="TEST" data-glf-reservation="true" s id="glfButton1"> Reserver online!</span>

CodePudding user response：

#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;
}