<div class="circle"></div>
<div class="smooth-circle"></div>

.circle,
.smooth-circle {
  display: inline-block;
  background-color: blue;
  width: 50px;
  height: 50px;
  border-radius: 50px;
}

.circle:hover,
.smooth-circle:hover {
  background-color: red;
}

.smooth-circle {
  margin-left: 20px;
  transition: background-color 0.2s ease;
}