(HTML/CSS) Text in a button doesn't show itself in certain browsers

Question

As I said, depending on what browser I'm using, the button varies for some reason. Here's the code I'm using right now- HTML-

<input type="button" id="submitButton" onclick="generateLink()" value="Go" />

CSS-

#submitButton {
  display: block;
  color: white;
  background-color: #8373e6;
  font-size: 26px;
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  outline: none;
  border: 3px solid #8373e6;
  padding: 5px 15px;
  margin: 20px;
  border-radius: 30px;
  box-shadow: 0 0 20px #9c9c9c67;
  width: min-content;
  cursor: pointer;
}

#submitButton:hover {
  background-color: #6b5ebd;
}

#submitButton:active {
  background-color: #554a97;
}

Whenever I look this up on the live server on my Windows PC (on both Firefox and Chrome), it looks the way I want it to. But when I deploy the test site on Firebase and check it out on my mobile phone (iPhone with Safari Browser), The text "Go" is gone and all I can see is a flat, text-less button. I have also tried changing the <input> tag to a <button> tag, adding a display: block; and a bunch of other stuff but it doesnt seem to work.

Any idea why this could be happening? Please and thanks.

Answer 1

Have you tried using anchor element ?

<a href='' id="submitButton" onclick="generateLink()" value="Go">Go </a>

a{
  display: block;
  color: white;
  background-color: #8373e6;
  font-size: 26px;
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  outline: none;
  border: 3px solid #8373e6;
  padding: 5px 15px;
  margin: 20px;
  border-radius: 30px;
  box-shadow: 0 0 20px #9c9c9c67;
  width: min-content;
  text-decoration:none;
}

a:hover {
  background-color: #6b5ebd;
  cursor:pointer;
}

a:active {
  background-color: #554a97;
}