<h2>Question for you? </h2>
<p style="text-align: center; display: block;" id="replyButtons">
  <a href="#yes" class="button" onclick="showThankYou()">Yes!</a> &nbsp;&nbsp; <a href="#no" class="button" onclick="showThankYou()">No!</a>
</p>

body {
  font-family: Roboto;
}
h2 {
  font-size: 50px;
  line-height: 50px;
  margin: 0 0 2% 0;
  text-align: center;
}

.button {
  position: relative;
  display: inline-block;
  border: 2px solid transparent;
  font-weight: normal;
  text-transform: uppercase;
  line-height: 1;
  text-align: center;
  transition: all 0.4s ease;
  cursor: pointer;
  border-radius: 4px;
  padding: 18px 30px;
  font-size: 18px;

  min-width: 140px;
  text-decoration: none;
  margin: 21px auto;
  background: #c3c3c3;
  color: black;
}
.button:hover {
  background: #2284d9;
  color: #fff;
}

#thankYouParagraph {
  text-align: center;
  background: #2284d9;
  color: white;
  padding: 10px;
  transition: all 1s ease-in;
  font-size: 25px;
  display: inline-block;
}

// alert("The hash of this page is: " + window.location.hash);
const hash = window.location.hash;
const x = document.getElementById("replyButtons");
if (hash === "#yes" || hash === "#no") {
  x.innerHTML = '<div id="thankYouParagraph">Thanks for your input!</div>';
}
function showThankYou() {
  const hash = window.location.hash;
  const x = document.getElementById("replyButtons");
  const paragraph = document.getElementById("thankYouParagraph");

  if (x.style.display === "block") {
    x.innerHTML = '<div id="thankYouParagraph">Thanks for your input!</div>';
  } else {
    x.style.display = "block";
  }
}