f1rgxq
Last Updated: February 25, 2016
·
1.683K
· sergiotapia
Avatar mario

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!

Say Thanks
Respond