Nice CSS3 Downloader
So, recently i've found this hover effect on tympanus.net, and i would to merge it with something else.
I decide to create a fullscreen loader to combine with, so Here it is !
First i create the ul li structure, and placed the a tag, in this tag, i put span div h1 and h2 markup to create the card look.
Then I put the div who serve to hide the page content with loader effect when the button is pressed, and this div contain the loader icon, who is animated with keyframes naturally.
Now talk about css, when the user put the mouse :hover the button, the state change by using :hover pseudo-class, that create a little animation (keyframe) for the 'download' label that make it turns blue and move, the icon grow up with font-size:90px; and all colors are inversed.
When the user click, the #fav div appear, and it's styled with a basic diagonal stripes technic using linear-gradient, and it's animated with keyframes (to be honest, it's just a loader with 100% width/height ... ;) and with low opacity.)
Finally the loader is animated with keyframes, and use box-shadows.
- All of the icons are from here, it's 100% font and no images ! -