A intencao e criar um efeito semelhante ao das abas do Chrome ou da barra de ferramentas do Windows 7, no qual um brilho se move sobre o botao acompanhando o cursor. Seguindo esse tutorial, nosso resultado sera esse:Vamos la. O primeiro passo e baixar a biblioteca jQuery e liga-la ao documento HTML. Se voce nao sabe como fazer eu ja postei aqui no blog (Utilizando o jQuery). No nosso arquivo HTML nos teremos dois elementos div para cada botao, um para o botao em si (a depender da implementacao pode ser um item de uma lista) e outro para o brilho. Vamos fazer tres botoes, entao nosso codigo HTML ficara assim:<html> <head> <script type="text/javascript" src="jquery.min.js"></script> </head> <body> <div class="botao twitter"><div class="brilho"></div></div> <div class="botao orkut"><div class="brilho"></div></div> <div class="botao facebook"><div class="brilho"></div></div> </body></html>Agora o CSS. Voce pode baixar as imagens aki: link. Para o elemento com a classe 'botao': definimos altura e largura, deixamos os elementos flutuando a esquerda (dessa forma o menu aparecera como se estivesse inline), espacamento de 10px a esquerda, overflow: hidden para esconder a parte do brilho que exceder o espaco do botao e borda arredondada na div para que a sombra fique da mesma forma e se adeque as imagens utilizadas.(Atencao: certifique-se de ajeitar a sombra e as bordas porque sao especificas do CSS3 e portanto sensiveis a inconsistencias de renderizacao. Para esse exemplo usei o Chrome e nao me preocupei com outros navegadores). Para o elemento com a classe 'brilho': definimos apenas altura e largura. Alem disso, definimos o background de cada item. Nosso CSS ficara assim:.botao{ width:48px; height:48px; float:left; padding:0; margin-left:10px; overflow:hidden; border-radius: 8px; box-shadow:3px 3px 5px #ddd;}.brilho{ width:55px; height:55px;}.twitter{ background:url(images/twitter.png);}.orkut{ background:url(images/orkut.png);}.facebook{ background:url(images/facebook.png);}Por fim, o JavaScript utilizando jQuery. E nesse momento que adicionaremos a imagem do brilho ao elemento de classe 'brilho', para que nao seja obstrutivo. Ou seja, caso o JavaScript nao funcione nao havera o efeito, mas o menu continuara usavel. Quando o mouse se mover sobre o botao o brilho aparecera com uma margem a esquerda equivalente a distancia do cursor subtraida da distancia do botao, ambas a partir da borda esquerda do navegador. Para colocar a imagem exatamente no centro do cursor basta subtrair o valor anterior da metade do tamanho da imagem usada como brilho. Definimos a margem superior num processo semelhante. Ocultamos a imagem do brilho atraves do JavaScript e permitimos que ela apareca apenas quando o cursor estiver sobre o botao e torne a desaparecer caso contrario. Desse forma nosso codigo ficara assim:$(document).ready(function() { var half = 27; // Metade do tamanho da imagem var pos; // Posicao do botao $(".brilho").css("background","url(images/light.png)").hide(); $(".botao").mousemove(function(mouse){ pos = $(this).offset(); $(this).find(".brilho").show(); $(".brilho").css("margin-left",mouse.pageX - half - pos.left); $(".brilho").css("margin-top",mouse.pageY - half - pos.top); }).mouseout(function(){ $(".brilho").hide(); });});Nosso efeito esta pronto. Veja o resultado: Demo.Voce pode substituir o show/hide do jQuery por fadeIn/fadeOut se quiser suavizar o efeito. Alem disso a imagem que voce criar para o brilho fara a diferenca, essa que usei fiz as pressas. E isso ai, espero que tenham gostado. Fiquei fascinado com as propriedades geradoras de conteudo do CSS. Visto que as folhas de