Last Updated: February 25, 2016
·
1.869K
· sergiotapia

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!