A CodePen by Jorger.

index.html

<div id = 'circulo'>
  <b>Botón</b>
</div>

style.css

#circulo
{
  background: red;
  border-radius: 50px;
  color: white;
  height: 60px;
  padding-top: 40px;
  width: 100px; 
  text-align: center;
  text-shadow: 1px 1px 1px black;
  transition: all 1s;
  /*-webkit-transform-origin: 20% 40%;*/ /*origen del giro */
  -webkit-transform-origin: center center; /*origen del giro en texto*/
  /*vertical-align: middle;*/

}

#circulo:hover
{
   /*transform:translate(40px);*/
  /*-webkit-transform:translate(70px, 40px);*/ /*X, Y*/
  /*-webkit-transform:scale(1.5,1.5);*/ /*Pixeles */
  -webkit-transform:rotate(360deg); /*Grados*/
  /*-webkit-transform:skew(20deg, 50deg);*/ /*Grados*/
  background: blue;
}