Для плавного изменения значения какого-либо стилевого свойства используется свойство transition с указанием времени перехода. Например:
div {
transition: 1s;
color: black;
}
div:hover {
color: red;
}
button {
padding: 1rem 2rem;
background: #00a7cf;
color: #fff;
border: none;
}