
Botão Efeito Rotação com Css3
ANTERIOR
Modulo Hover com Css Tema Sushi
Postado: 22 de agosto de 2021
Tempo de Leitura: < 1 Minuto
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:
Olá Adriano Obrigado pela visita no Blog!
[…] Além disso, o CSS3 também permite estilizar imagens e animações. É possível aplicar filtros de cor, ajustar o brilho e contraste, adicionar bordas e sombras, bem como animar elementos com transições suaves e efeitos de rotação. […]