Elegant login button using CSS3 transitions.
Ever since I first saw the login button for GiantBomb (and subsequently Whiskey Media), I wondered how they achieved the effect.
The sliding effect was very nice to my eyes and felt really 'iPhone-y' in a slide to unlock sort of way.
Some might say it's too much and looks tacky.
Everybody has an opinion - mine being I find it really snazzy.
To see the original in action visit Whiskey Media's login page:
https://auth.giantbomb.com/login
Here's my attempt at reverse-engineering how the effect is achieved.
http://codepen.io/sergiotapia/pen/rpgcu
It's quite simple; everything is handled on the pseudo element :hover
and uses CSS3 transitions to move the background image and text of the input button.
Do you think you can make it better? For my Codepen project and share!