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






53 thoughts on “jQuery + CSS – Melhore seus botões com o efeito Fade”

  1. 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?

    1. …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.

  2. 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.

  3. 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

  4. @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,

  5. 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.

  6. 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

  7. 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!

  8. 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

    1. 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?

  9. Ó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!

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

     

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

  11. 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á.

    1. 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;}

      1. .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.

  12. 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.

  13. 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

  14. 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!

  15. 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.

  16. 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? 

  17. 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?

  18. 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?

  19. 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?

    1. 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 :(

    1. $(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.

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

  21. Olá. Gostei muito do seu código e estou usando de montão. Só estou com uma dúvida e como não conheço jquery/java, não sei como fazer.

    Tenho os códigos que você postou acima, mas gostaria de criar ainda um efeito active no botão.

    COmo faço? Crio uma terceira imagem nop jpeg e um código #suapagina_botao span.active???

    E depois o que tenho que mudar nesse script?

    $(document).ready(function() {

    $(‘.efeito_fade’).append(”).each(function () {

    var $span = $(‘> span.hover’, this).css(‘opacity’, 1);

    $(this).hover(function () {

    $span.stop().fadeTo(250, 1);

    }, function () {

    $span.stop().fadeTo(250, 0);

    });

    });

    });

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>