Why does transition not work for a button?

The code looks completely normal and working, yet behaves as if all transitions are commented out.

Here is the code i currently have for the button:

.button {
  font-size: 19px;
  text-decoration: none;
  color: white;
  background: black;
  padding: 16px 38px;
  border-radius: 8px;
  border: 2px solid #0000;
  transition: all 500ms;
}
.button:hover {
  background: white;
  color: black;
  border-color: black;
  transition: all 500ms;
}

, yet it’s color isn’t animated on hover. It’s just an instant transition. Why?

I tried to remove all, i tried to swap 500ms for 0.5s, and i tried to add linear. Nothing changed.

>Solution :

Here is a snippet of your code. I added some HTML markup for making it work.

It functions perfectly here.

.button {
  font-size: 19px;
  text-decoration: none;
  color: white;
  background: black;
  padding: 16px 38px;
  border-radius: 8px;
  border: 2px solid #0000;
  transition: all 500ms;
}
.button:hover {
  background: white;
  color: black;
  border-color: black;
  transition: all 500ms;
}

<div>
  <button class="button"> Click me! </button>
</div>