<button>Hover simple</button>

<button class="delay">Hover with delay</button>
button {
  border:none;
  padding:10px 25px;
  background: #fb891f;
  color: #fff;
  font-size:18px;
  transition: background 0.5s linear;
}
button.delay {
  transition: background 0.5s linear 0.5s;
}

button:hover {
  background: #000000;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.