transition turns a sudden change into a smooth one.

Change a colour on :hover and it snaps across instantly. A transition makes the change smooth instead, like a light on a dimmer switch.

Put transition on the normal rule, not the hover rule: transition: background-color 0.3s;. It names the property to smooth out, then the duration, which is how long the change takes.

Durations come in seconds, 0.3s, or milliseconds, 300ms: the same thing. Keep them short. Anything over half a second starts to feel slow.

<button class="btn">Book a table</button>

.btn {
  padding: 12px 20px;
  color: white;
  background-color: royalblue;
  transition: background-color 0.3s;
}
.btn:hover {
  background-color: navy;
}

Point at the button, then move away. It fades both ways.