HTML

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

CSS

#s2
{
box-shadow: 0px 20px 10px rgba(128, 128, 128, 0);
background-color: transparent;
color: green;
outline: none;
border: 2px solid green;
transition: 1s ease-in-out;
}
#s2:hover
{
box-shadow: 0px 10px 10px grey;
transition: 1s ease-in-out;
animation: 2s rot ease-in-out;
}
@keyframes rot
{
30%{
transition: 1s ease-in-out;
transform: translateX(15px);
}
50%{
transition: 1s ease-in-out;
transform: rotateY(90deg);
}
70%{
transition: 1s ease-in-out;
transform: translateX(-15px);
}
}