Botão Efeito Rotação com Css3

Neste artigo vamos criar um botão Efeito Rotação com Css3.

vamos adicionar html:

<a href="#" class="botao rotacao" title="Veja mais"><i class="icon icon-search-2"></i> Veja mais</a>

Vamos Adicionar o css:

.botao {  

    display: inline-block;  
    padding: 0.8em 1.2em;    
    background-color:#143B84;  
    text-decoration: none;  
    color: #ffffff;
    border-radius:2px;
    font-family:'open_sansregular';
    margin-left:20px;
    border-radius:3px;  
} 
    
.rotacao {  
  display: inline-block;  
  -webkit-transition-duration: 0.5s;  
  transition-duration: 0.5s;  
  -webkit-transition-property: transform;  
  transition-property: transform;  
  -webkit-transform: translateZ(0);  
  transform: translateZ(0);  
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  
}


.rotacao:hover, .rotacao:focus, .rotacao:active {  
  -webkit-transform: scale(1.2) rotate(5deg);  
  transform: scale(1.1) rotate(5deg); 
  background:#FFA700; 
  transition:0.8s;
  box-shadow: 0px 6px 3px -1px rgba(0, 0, 0, 0.5);  
} 

Veja o resultado abaixo:

Baixar Código Veja Funcionando