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!