Como utilizar a propriedade transition em um botão
Escrito por: Felipe Mitamura Hatanaka Share on Facebook
Neste artigo vou mostrar como fazer o efeito que utilizamos nos botões de rede sociais que utilizei para desenvolver este site, como pode ser observado no footer. Este exemplo pode ser utilizado em qualquer imagem e links. Para fazer este exemplo basta adicionar o html abaixo:
No css utilizamos uma classe para poder reutilizar este código em todos os botões de rede social. Foi utilizada a propriedade opacity que deixa o elemento opaco e no hover do elemento deixamos a imagem com a opacidade máxima, para está troca de opacidade não ficar seca utizamos a propriedade transition para dar o efeito animado da transição da opacidade de 0.5 (50%) para 1 (100%) que demora 3 segundos, este valor é o parâmetro da propriedade que pode ser alterado de acordo com a necessidade.
.botao_social{
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
-ms-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
transition: .3s ease-in-out;
opacity: 0.5;
}
.botao_social:hover{
opacity: 1;
}
Por fim, juntando o código html e o css temos o resultado final:
Espero que tenham gostado! Curta nossa pagina no facebook/google+ e comentem!