HTML

<button id="s1" href="#">hi</button>

CSS

#s5
{
border-radius: 10px;
color: rgba(255, 255, 255, 0);
background: radial-gradient(#ffffff,#ffffff,#313131,#292929,#000000);
background-size: 200%;
transition: 1s ease-in-out;
}
#s5:hover
{
border-radius: 10px;
animation: ltr 2s ease-in-out;
transition: 1s ease-in-out;
}
@keyframes ltr{
25%{
border-radius: 100px;
color: rgb(0, 0, 0);
transition: 1s ease-in-out;
background-position: center;
}
50%{
border-radius: 10px;
color: rgba(255, 255, 255, 0);
transition: 1s ease-in-out;
background-position: right;
}
75%{
border-radius: 100px;
color: rgb(0, 0, 0);
transition: 1s ease-in-out; background-position: center;
}
}