Botão de login elegante usando transições CSS3.

Desde que vi pela primeira vez o botão de login do GiantBomb ( e subsequentemente do Whiskey Media ), me perguntei como eles conseguiram o efeito.

O efeito deslizante foi muito bom para os meus olhos e pareceu realmente ‘iPhone-y’ em um slide para desbloquear uma espécie de maneira.

Alguns podem dizer que é demais e parece cafona.

Todo mundo tem uma opinião – eu acho que é muito bacana.

Para ver o original em ação, visite a página de login da Whiskey Media:
https://auth.giantbomb.com/login


Aqui está minha tentativa de fazer engenharia reversa de como o efeito é alcançado.

http://codepen.io/sergiotapia/pen/rpgcu

É muito simples; tudo é tratado no pseudoelemento :hovere usa transições CSS3 para mover a imagem de fundo e o texto do botão de entrada.

Você acha que pode torná-lo melhor? Para meu projeto Codepen e compartilhe!