8 efeitos de transição para botões em CSS3
O CSS3 introduziu inúmeras novas possibilidades de efeitos de transição em CSS3 na programação e customização do código para designers de UX e a melhor parte sobre isso, é que o resultado é muito bom e os códigos são extremamente simples.
Com poucas linhas de código você terá um efeito de transição impressionante que vai encantar os seus usuários, aumentar o interatividade e, por fim, se bem utilizada, aumentar as suas conversões. Portanto, nesse artigo estão 8 efeitos de transição em CSS3 – CSS3 Transitions realmente simples que irá adicionar vida à sua UI e sorrisos aos rostos dos usuários.
Todos estes efeitos (exceto um) são controlados com a propriedade de transição. Assim, podemos ver estes efeitos trabalhando. Agora, para começar, vamos criar uma div em uma página HTML :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<div></div>
</body>
</html>
Tendo feito isso, defina uma largura e altura (dimensões), uma cor de fundo (para que possamos vê-lo) e sua propriedade de transição.
<style type="text/css">
body > div
{
width:483px;
height:298px;
background:#676470;
transition:all 0.3s ease;
}
</style>
A propriedade de transição tem três valores: as propriedades para transição (no nosso exemplo todos eles) a velocidade da transição (no nosso exemplo 0,3 segundos) e um terceiro valor que lhe permite alterar a forma como a aceleração e desaceleração é calculada, mas nós vamos utilizar o valor padrão, deixando este espaço em branco. Agora tudo o que precisamos fazer é alterar as propriedades, e ver a animação acontecer…
Vamos agoras ver os tipos de efeitos que o CSS3 proporciona:
1. Fade In
O efeitos Fade in é um dos efeitos mais comuns entre os programadores. É uma ótima maneira de enfatizar a funcionalidade ou chamar a atenção para uma chamada à ação. O efeito Fade in é codificado em duas etapas: primeiro, você definir o estado inicial; Em seguida, você define a mudança, utilizando por exemplo o seletor de evento hover:
.fade
{
opacity:0.5;
}
.fade:hover
{
opacity:1;
}
(Certifique-se de definir a classe de sua div para ” fade” para ver funcionar.)
2. Mudança de cor
Animar uma mudança de cor para uma div costumava ser incrivelmente complexo, com todos os tipos de combinações envolvidos no cálculo de valores RGB de maneira separadas e, em seguida, recombinando-os. Agora, nós apenas definir a classe na div como “color” e especificar a cor que queremos em nossa CSS:
.color:hover
{
background:#53a7ea;
}
(Lembrando que sua div já tem uma cor de background que foi estipulada anteriormente)
3. Crescer (grow) e Encolher (shrink)
Para aumentar um elemento, você costumava ter que usar a sua largura e altura, ou o seu preenchimento. Mas agora podemos usar CSS3 para transformar, para ampliar. Defina a classe da sua div para “grow” (crescer) e, em seguida, adicione este código, atribuindo um valor maior que 1 para o scale, ou seja para a escala de tamanho do seu objeto:
.grow:hover
{
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
Encolher um elemento é tão simples quanto o efeito anterior. Como vimos anteriormente, para ampliar um elemento especificamos um valor maior que 1 para o scale, para reduzi-lo, nós vamos especificar um valor inferior a 1:
.shrink:hover
{
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
(Lembrando de definir a classe shrink (encolher) a sua div)
4. Rotacionar
O CSS transform tem variações de utilizações diferentes, e uma das melhores é a transformação de um elemento de rotação. Defina sua div com a classe “rotate ” e adicione o seguinte ao seu CSS:
.rotate:hover
{
-webkit-transform: rotateZ(-30deg);
-ms-transform: rotateZ(-30deg);
transform: rotateZ(-30deg);
}
Para alterar o sentido e ângulo de rotação, basta alterar os valores de rotateZ.
5. Arredondar
Um efeito muito popular no momento é a transição de um elemento quadrado em um arredondado, e vice- versa. Isso é um efeito simples de se conseguir com CSS, nós apenas a mudamos a propriedade border-radius . Defina a sua div uma classe “circle” e adicione o seguinte CSS:
.circle:hover
{
border-radius:50%;
}
6. Sombras em 3D
O efeito de Sombras não tem sido muito utilizado, pois de uma ano para cá ele fi considerado um efeito que não combina com o estilo de design flat empregado nos layouts de sites atualmente. Este efeito é conseguido através da adição de uma caixa de sombra (box-shadow), deslocada no eixo x usando as propriedades de transformação de modo que apareça a crescendo para fora do objeto. Para obter esse efeito de a sua div uma classe “Threed ” e, em seguida, adicione o seguinte código ao seu CSS:
.threed:hover
{
box-shadow:
1px 1px #53a7ea,
2px 2px #53a7ea,
3px 3px #53a7ea;
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
7. Swing
Nem todos os elementos utilizam a propriedade de transição. Podemos também criar animações altamente complexas usando keyframes, de animação e animação-iteração. Neste caso, vamos primeiro definir uma animação CSS em seus estilos . Você vai notar que, devido a problemas de implementação, nós precisamos usar @ -webkit- keyframes bem como @keyframes:
@-webkit-keyframes swing
{
15%
{
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30%
{
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50%
{
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
65%
{
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
80%
{
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
100%
{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes swing
{
15%
{
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30%
{
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50%
{
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
65%
{
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
80%
{
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
100%
{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
Esta animação simplesmente move o elemento para a esquerda e direita, agora tudo o que precisamos fazer é aplicar o CSS:
.swing:hover
{
-webkit-animation: swing 1s ease;
animation: swing 1s ease;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
8. Inserir borda
Um dos mais utilizados estilos de botão agora é o botão que ao ter o mouse sobre o elemento, uma borda é criada para destacar o conteúdo. Para isso utilizaremos a transição que cria uma borda usando uma sombra de caixa embutida. Dê a sua div uma classe com o nome “border” e adicione o seguinte CSS com seus estilos :
.border:hover
{
box-shadow: inset 0 0 0 25px #53a7ea;
}
Simples assim.
Muito outros efeito de transição e transformação são possíveis de serem feitos, porém esses 8 são os mais populares e os mais utilizados devido ao seu desempenho e baixa necessidade de utilização de processamento.