jQuery + CSS – Melhore seus botões com o efeito Fade

jQuery + CSS – Melhore seus botões com o efeito Fade

Não foi à toa que o jQuery se firmou como uma das melhores bibliotecas javascript disponíveis. Além de levar o desenvolvimento cross-browser a sério e ser muito fácil de usar, o jQuery tem uma enorme quantidade de plugins. Nesse post vou mostrar como você pode usá-lo para adicionar facilmente um efeito de Fade sutil e elegante aos seus botões.

Como funciona

A mecânica é simples: a função jQuery identifica o elemento onde deve ser aplicado o efeito e insere dentro dela uma tag <span>, que é quem realmente receberá o Fade. Tudo o que você precisa saber e fazer é colocar um pequeno trecho javascript na sua página, ajustar seu CSS e adicionar uma classe ao botão que receberá o efeito.

É exatamente o mesmo efeito que está aplicado aos botões de Download e Demo no início do post. Você também pode acessar a demonstração e baixar os arquivos para visualizar melhor o código.

O Javascript

O primeiro passo é importar o jQuery normalmente. Depois é só inserir a função abaixo. Perceba que logo no início do código, na segunda linha, você deve colocar a classe dos botões que receberão o efeito (nesse caso: efeito_fade). Todos os elementos com essa classe serão animados.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.efeito_fade').append('').each(function () {
var $span = $('> span.hover', this).css('opacity', 0);
$(this).hover(function () {
$span.stop().fadeTo(500, 1);
}, function () {
$span.stop().fadeTo(500, 0);
});
});
});
</script>

O CSS

No CSS, a primeira coisa a fazer é criar um botão comum, com a técnica clássica de image replacement para diferenciar o estado normal (“apagado”) do estado :hover (“aceso”). Ou seja, criar uma imagem que contenha os dois estados do botão e então estilizá-lo usando a propriedade background-position para fazer a troca de um estado para o outro quando o usuário passa o mouse sobre ele.
A única diferença é que ao invés de estilizar o estado :hover em si, você irá estilizar a tag <span> que será criada dentro do botão como se fosse o :hover, com algumas pequenas mudanças:
A primeira é posicionar o botão relativamente (position:relative), para que o <span> fique corretamente colocado dentro dele. A segunda é posicionar o <span> absolutamente (position:absolute) e repetir as mesmas propriedades do botão, ajustando apenas o background. Eu sei, parece complicado, mas veja como o código não tem nada demais:

/* botao 1 */
#seu_botao {
	clear: both;
	position:relative;
	display:block;
	height: 64px;
	width: 570px;
	background:url(images/botao.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
}	
#seu_botao span.hover {
	position: absolute;
	display: block;
	height: 64px;
	width: 570px;
	background: url(images/botao.png) no-repeat;
	background-position: bottom;
}

/* botao 2 */
#outro_botao {
	clear: both;
	position:relative;
	display:block;
	height: 64px;
	width: 570px;
	background:url(images/outro.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
}	
#outro_botao span.hover {
	position: absolute;
	display: block;
	height: 64px;
	width: 570px;
	background: url(images/outro.png) no-repeat;
	background-position: bottom;
}

O HTML

Como eu disse, a única coisa que você precisa fazer no seu HTML é atribuir a classe indicada na função javascript em todos os elementos que receberão o fade. Nesse caso a classe é a “efeito_fade”. Veja o código dos dois botões desse exemplo:

<a href="#" id="seu_botao" class="efeito_fade"></a>
<br />
<a href="#" id="outro_botao" class="efeito_fade"></a>

Veja abaixo como ficam os botões desse exemplo e perceba que, por ter um código HTML extremamente simples e deixar toda a mágica para o javascript e CSS, os botões podem ser facilmente aplicados a qualquer parte do seu site. Uma dica é experimentar usar essa técnica não apenas para botões, mas também para menus, imagens e outros elementos interativos, tomando sempre cuidado para não exagerar na dose.





Saiba mais

Quer saber mais sobre jQuery e começar a escrever o seu próprio código? Leia os posts:
- jQuery para iniciantes
- jQuery para iniciantes II – Sintaxe e seletores






Você gostou deste post?






  • Neemias Júnior

    Hmm interessante…
    Mas o que eu não gostei é ter que embutir esse monte de código na página… Sei lá, polui o código. Não tem como colocar esse script todo dentro de um arquivo?

    Outra coisa: quando o javascript é desativado, o botão fica sem o :hover comum. Tem jeito de escrever um código para quando o javascript está desativado?

  • Neemias Júnior

    Ah, mais uma dúvida: se eu precisar do :active, posso o deixar sem o script? porque o intuito do active é justamente ser imediato, sem fade.

  • Lucas

    Mandou bem amigo
    tava afim de fazer um site só no ccs só que o menu que é meio complicado
    vc resolveu meu problema xD

    abraços

  • http://www.domeniconicola.com Domênico Citrângulo

    @Neemias
    Claro, você pode e deve sempre separar o código javascript do seu código HTML, assim como deve separar o CSS. Mas nos exemplos que eu dou aqui procuro ser bastante didático e manter tudo o mais simples possível, para que todo mundo consiga em primeiro lugar entender o código e então fazer tudo funcionar. Depois cada um deve sempre organizar seu código da melhor maneira possível.

    E para contornar o problema da ausência de suporte ao javascript, você pode criar uma folha de estilos adicional e importá-la entre as tags

    O :active também não é difícil de resolver, mas essa eu vou deixar pra você estudar, afinal de contas não posso entregar tudo assim tão fácil. =) A idéia é dar um início para que vocês usem e customizem.

    Abs,

  • http://www.domeniconicola.com Domênico Citrângulo

    @Lucas
    Obrigado! Boa sorte no seu site. =)

  • http://www.rorcaldas.com.br Euler

    Nossa realmente o efeito final é perfeito, alem de agregar mais valor em uma pagina com layout moderno, sem a necessidade de usar efeitos em flash pra isso. Parabéns muito bom e útil o post.

  • Gilmar

    Sou iniciante e gostaria de saber como faço para diminuir o tamanho do botão para 160px de largura e 30px de altura??

    Obrigado

  • http://www.brunomont.com/ Monteiro

    Excelente. Totalmente funcional.

    Contrariando o que foi dito pelo Neemias Júnior, o código não precisa ficar diretamente no html, você pode coloca-lo dentro de um .js e o CSS dentro de um .css. Isso ajuda a dar uma limpada no seu código principal.

    Caso não seja o suficiente, deixe tudo numa linha só. :)

    Parabéns e obrigado pelo código!

  • http://Seuwebsite Sales

    O texto sobre os botões foram salvos na imagem, ou dá para editar pelo código?
    se puder explicar fico grato.

  • http://www.skywebsites.totalsfree.com Guilherme

    Olha só! Muito legal! Estou acessando cada página de seu site e estou aprendendo muita coisa maneira, continue postando novidades. Valeu ae!

  • http://ronnysantana.com.br Ronny Santana

    Interessante…

  • http://ronnysantana.com.br Ronny Santana

    Ola, e como posso ultilizar com input submit?

  • http://www.homeprodutos.com Gabriel

    Olá amigo, gostaria de saber como posso utilizar esse botão como um submit.

  • lkm

    para usar o botão como submit de um formulário acrescente o seguinte javascript

    function enviar_formulario(){
    document.form1.submit()
    }

    e o botão enviar

  • Claudio

    Amigo lkm salvaste minha noite estava quebrando a cabeça para fazé-lo funcionar como Submit. VLW

  • Claudio

    Era demasiado bom para ser verdade. Coloquei esse script realmente o fade funciona mas o formulário não é processado porque este não sabe que o botão foi clicado.

    Está faltando alguma coisa…não?

  • Teste

    Cara não consigo fazer funcionar no IE, fica piscando com umas manchas no meu PNG. Oq pode ser?

  • Junior

    Ótima dica, jQuery é simplesmente fantástico!
    Você poderia me dizer qual fonte usou no na imagem do botão? Estou procurando essa fonte há tempos!

  • cdowebcast

    …depois de 9 meses: O povo não sabe que isto é só um exemplo, que você programa da maneira que quiser na sua página, no seu código…aff, maldito vício de CTRL + C e CTRL + V …querem tudo pronto. E leiam todas as mensagens antes de colocar um comentário inútil em qualquer matéria.

  • http://profiles.google.com/osielrobson Osiel Robson da Silva

    amigo, boa tarde!
    o código é excelente, mas consegui aplicar apenas 6 botões, preciso anexar uns 25… ao colocar o 7 este ñ aparece… o q faço pra continuar inserindo os botões?

  • Rafael

     
    function enviar_formulario(){ 
    document.form1.submit() 

     

    Boa tarde, tenho uma duvida, poderia me explicar como eu aplico para meu que submit funcione?

  • Cassio

    Caro, amigo estou começando a programar para a web, fiz o botão como voce encina acima no texto mas quanto ele vai dar o efeito meu texto não aparece de forma alguma nem no esta normal do batão nem no estado hover. por favor mim da uma ajudinha. agradeço desde já.

  • Rafael

    Bom dia, tem quem ser tudo em imagem, no caso desse efeito ele está tudo em 1 JPG/PNG, fazendo com que no primeiro momento ele esteja no TOPO da imagem e quando passar o mouse(hover) ele vá para BAIXO, se lembre de por os tamanhos somente do BOTÃO, não da imagem inteira. 

    .twitter { width:68px; height:28px; display:block; background:url(twitter.png); background-repeat:no-repeat; background-position:top; border:0px; cursor:pointer;}.twitter span.hover { width:68px; height:28px; display:block; background:url(twitter.png); background-repeat:no-repeat; background-position:bottom;}

  • Rafael

    .twitter { width:68px; height:28px; display:block; background:url(twitter.png); background-repeat:no-repeat; background-position:top; border:0px; cursor:pointer;}………………………………………………………..
    .twitter span.hover { width:68px; height:28px; display:block; background:url(twitter.png); background-repeat:no-repeat; background-position:bottom;}

    Código separado.

  • Cassio_ds

    Ajudaaa, caro amigos, adorei o efeito dos botãos ficou otimo muito obrigado, agora mim tira outra duvida, não consigo colocar os botões juntos 1 do lado do outro nem mesmo usando tabela, existe algum segredo.

  • Lucas Suppes

    Cara, estou usando CSS Sprite no menu , podia fazer ai outro efeito de como posso fazer?

  • John

    cara, não estou conseguindo colocar um do lado do outro, fazendo um menu sabe? teria dicas? abraços

  • Henrique Barcelos

    Gostei muito, mas estou tendo alguns probleminhas.: Eu criei um desses botos para substituir o link ‘Leia Mais’, do Blogger, mas nem sempre os efeitos ocorrem com plenitude, como no seu site, por exemplo, em alguns posts, ocorre o fade no mouseover, mas em outros não. O que pode ser? Por favor, ficarei grato com sua ajuda

  • http://twitter.com/pablo_gates Pablo IrviN

    Obrigado! é a única palavra que eu posso lhe dizer, seu site tem um ótimo conteúdo!

  • Vagner

    tentei mas não conseguir, sou muito leigo, e não teve jeito, onde devo copiar o primeiro código, e o segundo???
    acima de  ]]>?
    se puder me ajudar, agradeceria, muito!

  • Vagner

     de tanto tentar eu conseguir, obrigado, mas ainda tenho uma dúvida, é possível ocultar o link de download?

  • Pozo

    Amigo, eu tentei incorporar esse codigo no blogger, mas o efeito não funciona, tem ideia do que pode ser?

  • Suzana Carvalho

    Oi,
    como eu posso fazer pra aplicar o efeito fade em apenas links? em nenhuma imagem..

  • Mat

    Bem, também teria a possibilidade de fazer este efeito utilizando apensa uma linha a mais de CSS e eliminando totalmente o jQuery, no caso ficaria assim:
    #botao {
    background:url(caminho);
    width:px;
    height:px;
    -webkit-transition:linear 1s background;
    -moz-transition:linear 1s background; 
    -o-transition:linear 1s background; 
    }
    #bota:hover {
    background:url(caminho2);width:px;height:px;-webkit-transition:linear 1s background;
    -moz-transition:linear 1s background; 
    -o-transition:linear 1s background; }

    Facilita um pouco pra quem não tem muito conhecimento no jQuery, porém é mais recomendado usa-lo.
    Grato.

  • Álan Novello

    Bom dia!
    Efeito super simples, porém de grande serventia. 
    Principalmente na maioria dos browsers (menos no IE) :( 
    E retorna aquele velho problema das imagens sem fundo e estou falando de IE 8.
    Alguém sabe algum hack ou script para corrigir isso? 

  • Álan Novello

    Bom dia Mat,

    Como eu usaria isso no link?

  • Fabio Fukuma

    Muito bom, funciocou perfeitamente!
    OBS:Muito lindo este site!

  • Fábio Fukuma

    Notei agora, o hover fica com margin 1px left e top do botão normal,
    para resolver usei:

    margin-left:-1px;
    margin-top: -1px;

    Alguem sabe me dizer o que causa esae margin?

  • Joel Batista

    Funciona no WordPress? Onde colocar a parte html nele?

  • Vítor.

    isso funciona no blogspot? caso sim, como faço?

  • http://www.facebook.com/rafaelbffreire Rafael Freire

    Tenho uma questão curiosa a resolver: Tenho uma área de Login e Senha que funcionam perfeitamente em todos os navegadores, incluindo IE, Chrome, Firefox, Safari. Funciona nas plataformas Windows, Linux, MAC. Só não funciona no iPAD, onde os caracteres são digitados, mas não reconhecidos pelo identificador. Alguém sabe a razão e a solução?

  • http://www.facebook.com/luizfillipi.oliveira Luiz Fillipi Oliveira

    Olá amigos, uma coisa eu não entendi, o jquery eu crio uma folha .js, o css eu coloco no css do meu site, ok. Mas o HTML:
    a href=”#” id=”seu_botao” class=”efeito_fade”>a href=”#” id=”outro_botao” class=”efeito_fade”>

    onde eu coloco este código html?

  • http://eternia.com.br/jquery-css-%e2%80%93-melhore-seus-botoes-com-o-efeito-fade/ jQuery + CSS – Melhore seus botões com o efeito Fade | Parque Internet – Blog Eternia de Tecnologia

    [...] Fonte: http://www.toprated.com.br/jquery-css-melhore-seus-botoes-com-o-efeito-fade [...]

  • http://www.facebook.com/max.netseo Max Stryper

    Olá!

    Não funcionou no IE 7…Existe possibilidade de correção?

  • Marcus

    Como eu altero a velocidade da animação?

  • Guest

    $(this).hover(function () {
    07.$span.stop().fadeTo(500, 1);
    08.}, function () {
    09.$span.stop().fadeTo(500, 0);
    Onde tem (500, 0) – A velocidade está constituída em milésimos.

  • Eduardo

    Também não consegui usar no wordpress. Tem que chamar o query e colocar o estilo dele dentro do seu style.css. Não seu usar query :(

  • Tiago

    Excelente post, parabéns!

  • ana michelly

    este codigo dos botões coloca a onde dentro da body ou no head ?

  • Jefferson Luiz da Rosa

    Porque não utiliza apenas CSS3 -> transition? Pra que JQ?
    Olha o efeito aqui em um dos meus sites http://terraplenagemzagonel.com.br.

  • Rafael

    Onde você colocou no Blogger?

  • Renato Santos

    Gostaria de usar uma imagem como play de um video, pressionar a imagem e automaticamente dar o pay no video!