Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Fernando Neto MH

Efeito fade in e out em buttom

Por , em Desenvolvimento frontend

Recommended Posts

Wanderson Valerio    102

Wanderson Valerio
Postado 

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   $("input[name='meu_botao']").hover(function(){
       $(this).fadeTo('fast', 0.3); // Cerca de 70% de opacidade
   }, function(){
       $(this).fadeIn('fast', 1); // 100% de opacidade
   });
});
</script>
<form>
   ...
   <input type="button" name="meu_botao" />
   ...
</form>

 

Eu não testei, mas deve funcionar...

 

O efeito acima é par opacidade, mas o botão que você mencionou, é só seguir o tutorial que lá explica tudo direitinho.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marco Bruno    19

Marco Bruno
Postado

Bom dia, Fernando Neto MH.

 

Caso não seja requisição do projeto que funcione em todos os navegadores o fadein e fadeout, recomento você utilizar o "transition". Segue exemplo abaixo:

 

<!DOCTYPE html>
<html lang="pt-BR">
<head>
	<title>Transition - Fadein and Fadeout</title>

	<meta charset="UTF-8">

	<style>
		a {
			display: block;
			border-radius: 10px;
			width: 100px; height: 60px;
			margin: 100px auto;

			font: 14px Tahoma, sans-serif;
			text-decoration: none;
			text-align: center;
			line-height: 60px;
			color: #333;

			background-color: #EEF1F3; /* Caso nao tenha suporte ao transition */

			-webkit-transition: all 1s linear;
			-moz-transition: all 1s linear;
			-o-transition: all 1s linear;
			transition: all 1s linear;
		}

		a:hover {
			color: #FFF;

			background-color: #FF3636; /* Caso nao tenha suporte ao transition */

			-webkit-transition: all 1s linear;
			-moz-transition: all 1s linear;
			-o-transition: all 1s linear;
			transition: all 1s linear;
		}


	</style>
</head>
<body>
	<a href="#">Seu botão</a>
	<a href="#">Outro botão</a>
</body>
</html>

 

Qualquer dúvida da um grito ae!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

Eu realmente não sou a favor de utilizar os atributos CSS que ainda não foram finalizados pela W3C. Pois o transition por exemplo não aceita diversos atributos. Este efeito por exemplo, seria fácil fazer se tudo estivesse finalizado, assim:

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Lorem ipsum dolor sit amet</title>
<style>
.button {
display: inline-block;
font: bold 24px/60px Tahoma, Geneva, sans-serif;
text-decoration: none;
color: #333;
padding: 0 50px;

background: linear-gradient(to bottom, #feffff 0%,#bdc5c9 100%);

border: 1px solid #CCC;
border-radius: 10px;

transition: all 1s ease;
}
.button:hover {
color: #FFF;

background: linear-gradient(to bottom, #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%);

border-color: #900;
}
</style>
</head>

<body>
<a href="" class="button">Lorem ipsum</a>
</body>
</html>

 

 

Isto por que, eu prefiro evitar também sujar meu CSS com esses "-seubrowseraqui-atributoCSS3". Enquanto não puder sair disso, prefiro JS como o exemplo citado na abertura do post. Exemplo esse, que inclusive explica o uso do efeito, e não necessitava do tópico. :thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Wanderson Valerio    102

Wanderson Valerio
Postado

@André Campos, concordo com você. E o amigo do tópico está no tutorial já, por quê ele não segue o tutorial? O tutorial já mostra como o efeito é realizado, é só seguir.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Apenas Eu    13

Apenas Eu
Postado

Opa!

Eu estava fuçando o forum, encontrei esta pasta e gostei muito desse efeito nos botões. Dae cutucando ali e aki consegui reproduzir o efeito, mas notei algo que não gostei.

 

Não sei se foi algo que errei, mas parece o efeito buga quando coloca o texto no <a> ou seja, para funcionar direitinho cada botão tem que ter uma imagem diferente com o texto fazendo parte dela É assim mesmo?

 

Tipo:

 

Assim funciona bem:

<a href "#" id="meu_botao" class="efeito_hover"></a>

 

Assim Não funciona bem:

<a href "#" id="meu_botao" class="efeito_hover">Texto do botão</a>

 

Valeu!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito