My html button cannot be clicked, even though I modified only its style-CodePudding

The code I have for my button in HTML is this simple

What causes the button to not be able to be clicked, even though it is of type button?

.menubutton {
  background-color: orange;
  color: black;
  text-align: center;
  font-size: 20px;
  padding: 20px 50px;
}

<button  style="position:absolute;left:10%" type="button"><b>Home</b></button>

CodePudding user response：

The button is able to be clicked, as demonstrated by the following event listener:

document.querySelector(".menubutton").addEventListener("click", (e) => {
  console.log("button was clicked!");
})

.menubutton {
  background-color: orange;
  color: black;
  text-align: center;
  font-size: 20px;
  padding: 20px 50px;
}

<button  style="position:absolute;left:10%" type="button"><b>Home</b></button>

You probably mean that the user can't tell it's a button. To improve this, add a hover effect and pointer cursor to the CSS:

document.querySelector(".menubutton").addEventListener("click", (e) => {
  console.log("button was clicked!");
})

.menubutton {
  background-color: orange;
  color: black;
  text-align: center;
  font-size: 20px;
  padding: 20px 50px;
  
  /*