HTML // CSS // JavaScript : button or input doesn't show up on web

Question

My form uses some logic conditionals based on the user's text input. I wrote a JavaScript function for the conditional and decided to execute this function when the user hits a button, after typing in the text-field. When I run my code on a live preview from Brackets.io, the buttons are visible. But when I open the .html file on the web, the buttons don't show up.

I tried using <input> with type="submit" to make it a button but this doesn't show up too.

HTML:

<button id="funcCond">Proceed</button>

CSS:

button {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -300%);
          transform: translate(-50%, -300%);
  display: block;
  width: 70vw;
  opacity: 0;
  pointer-events: none;
  transition: all 0.5s cubic-bezier(0.4, 0.25, 0.8, 0.3);
}

Answer 1

Try:

<button type="submit" id="funcCond">proceed</button>

or:

<input type="button" value="proceed"/>

..and make sure to modify your opacity value to 1

Answer 2

尝试将（type）属性添加到html按钮<button type="button" id="funcCond">proceed</button>或者将输入元素与按钮类型<input type="button">