Как задать transition только к COLOR?

button{
cursor: pointer;
display: flex;
text-align: center;
align-items: center;
margin: 0 auto;
color: rgb(255,255,255);
font-size: 18px;

background: rgb(88,101,242);
padding: 10px 250px 10px 250px;
border-radius: 5px;
transition: 0.2s ease;

}



button:hover{

background: rgb(71,82,196);

}

CSS

button{

    cursor: pointer;

    display: flex;

    text-align: center;

    align-items: center;

    margin: 0 auto;

    color: rgb(255,255,255);

    font-size: 18px;

    

    background: rgb(88,101,242);

    padding: 10px 250px 10px 250px;

    border-radius: 5px;

    transition: 0.2s ease;

    

}







button:hover{

    

    background: rgb(71,82,196);



}

При адаптиве блок transition, трогает сам button, и выглядит некрасиво
Нужно чтобы transition применялся только к color, то есть плавное изменение цвета