SOURCE

<div id='ball'></div>
<div id='line'></div>

body{
  overflow:hidden;
}
#ball{
  position:absolute;
  background:linear-gradient( 45deg, greenyellow, orangered);;
  z-index:999;
  width:200px;
  height:200px;
  border-radius:100px;
  top:50%;
  left:50%;
  box-shadow:rgb(51,51,51) 0px 0px 10px;
  transform:translate(-100px,-100px);
  transition:all 1s ease-in-out;
}
#line{
   position:absolute;
  background:#999;
  z-index:999;
  width:100%;
  height:2px;
  top:50%;
  left:50%;
  transform:translate(-50%,99px);
}
#ball:hover{
  transform:translate(300px,-100px) rotate(-180deg);
}
#ball:active{
  height:200px;
  transform:scaleY(0.6);
}