How can I hide a HTML button on hover?

Issue

I am trying to hide my .dwBtn class button on hover, using the code below, but it's not working.

.dwBtn {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: rgb(0, 180, 0);
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}

.dwBtn:hover {
  display: none;
}

<button class="dwBtn">Test</button>

I've searched on Google and on StackOverflow but cannot find a solution. I have tried changing the opacity, like so:

opacity: 0;

But it still isn't doing anything as far as I can see. It looks as if there was a typo somewhere, but I can't find it.

Solution

When the element isn't being displayed, you can't hover it anymore, so the rule stops applying, and it springs back immediately.

Using opacity will work (it hides it, with :hover still applying), it just didn't seem to because of that typo you have since fixed.

.dwBtn {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: rgb(0, 180, 0);
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}

.dwBtn:hover {
  opacity: 0;
}

<button class="dwBtn">Test</button>

Answered By - John Wess