Vamos lá. O primeiro passo é baixar a biblioteca jQuery e ligá-la ao documento HTML. Se você não sabe como fazer eu já postei aqui no blog (Utilizando o jQuery). No nosso arquivo HTML nós teremos dois elementos div para cada botão, um para o botão em si (a depender da implementação pode ser um item de uma lista) e outro para o brilho. Vamos fazer três botões, então nosso código HTML ficará 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. Você pode baixar as imagens aki: link.
Para o elemento com a classe 'botão': definimos altura e largura, deixamos os elementos flutuando à esquerda (dessa forma o menu aparecerá como se estivesse inline), espaçamento de 10px à esquerda, overflow: hidden para esconder a parte do brilho que exceder o espaço do botão e borda arredondada na div para que a sombra fique da mesma forma e se adeque às imagens utilizadas.
(Atenção: certifique-se de ajeitar a sombra e as bordas porque são especificas do CSS3 e portanto sensíveis à inconsistências de renderização. Para esse exemplo usei o Chrome e não me preocupei com outros navegadores).
Para o elemento com a classe 'brilho': definimos apenas altura e largura. Além disso, definimos o background de cada item. Nosso CSS ficará 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. É nesse momento que adicionaremos a imagem do brilho ao elemento de classe 'brilho', para que não seja obstrutivo. Ou seja, caso o JavaScript não funcione não haverá o efeito, mas o menu continuará usável. Quando o mouse se mover sobre o botão o brilho aparecerá com uma margem à esquerda equivalente à distância do cursor subtraída da distância do botão, 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 através do JavaScript e permitimos que ela apareça apenas quando o cursor estiver sobre o botão e torne a desaparecer caso contrário. Desse forma nosso código ficará assim:
$(document).ready(function() {
var half = 27; // Metade do tamanho da imagem
var pos; // Posição do botão
$(".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 está pronto. Veja o resultado: Demo.
Você pode substituir o show/hide do jQuery por fadeIn/fadeOut se quiser suavizar o efeito. Além disso a imagem que você criar para o brilho fará a diferença, essa que usei fiz às pressas.
É isso aí, espero que tenham gostado.
