You see how the one called Bill is smooth going in and out? That’s what we want and luckily there is an easy trick.

<style>
.wbBtn {
  border: 2px solid black;
  background-color: black;
  color: white;
  font-weight: bold;
  transition: all 500ms ease-in-out; /* Just put the transition here instead */
}

.wbBtn:hover {
  background-color: white;
  color: black;
  border-radius: 4px;
}
</style>

<button class="wbBtnNotSmooth" type="button">
  <p>Me Button</p>
</button>

All you have to do is add the same transition to the code without the ‘:hover’ element on it, and when you stop hovering, the button will do another transition back to the way the button looked originally.

This extends to basically anything you can use a transition on.