Botão Efeito Rotação com Css3
Postado: 22 de agosto de 2021
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
Publicado por: loopnerd
785 Visualizações
Deixe um comentário