HTML

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

CSS

#s4
{
border-radius: 20px;
background: none;
border: 2px solid #000;
font-family: "montserrat",sans-serif;
text-transform: uppercase;
margin: 10px;
cursor: pointer;
transition: 1s ease-in-out;
position: relative;
}
#s4:hover
{
transition: 1s ease-in-out;
animation: bw 1s ease-in-out;
}
@keyframes bw{ 10%{
transition: 1s ease-in-out;
background: radial-gradient(white,rgb(165, 164, 164));
background-position: bottom;
}
20%{
transition: 1s ease-in-out;
background: radial-gradient(rgb(165, 164, 164),grey);
background-position: top;
}
30%{
transition: 1s ease-in-out;
background: radial-gradient(grey,rgb(90, 90, 90));
background-position: bottom;
}
40%{
transition: 1s ease-in-out;
background: radial-gradient(rgb(156, 156, 156),rgb(90, 90, 90),rgb(46, 46, 46));
background-position: top;
}
50%{
color: white;
font-weight: 100;
transition: 1s ease-in-out;
background: radial-gradient(rgb(192, 192, 192),rgb(126, 125, 125),black);
background-position: bottom;
}
60%{
transition: 1s ease-in-out;
background: radial-gradient(rgb(212, 211, 211),black,rgb(146, 146, 146));
background: rgb(255, 255, 255);
background-position: top;
}
70%{
transition: 1s ease-in-out;
background: radial-gradient(rgb(224, 224, 224),rgb(160, 160, 160));
background-position: bottom;
}
80%{
transition: 1s ease-in-out;
background: radial-gradient(rgb(255, 255, 255),rgb(196, 195, 195));
background-position: top;
}
90%{
transition: 1s ease-in-out;
background: radial-gradient(rgb(238, 236, 236),rgb(160, 160, 160));
background-position: bottom;
}
100%{
transition: 1s ease-in-out;
background: rgb(255, 255, 255);
background-position: top;
}
}