Say what may change, and how long it takes

.btn {
  background: #00bcd4;
  transition: background 0.25s ease;
}
.btn:hover {
  background: #0097a7;
}

The transition goes on the RESTING state, not on :hover. Put it only on hover and the change eases in but snaps back the instant the cursor leaves.

Be specific about what transitions

transition: all 0.3s is tempting and wasteful: the browser then watches every property for change, including expensive ones. Name the properties you actually animate.

Keep it quick

150-300ms feels responsive. Beyond about 400ms an interface starts to feel slow rather than smooth. The animation stops being feedback and becomes a delay.