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
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
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
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
div appear, and it's styled with a basic diagonal stripes technic using
, and it's animated with
keyframes (to be honest, it's just a loader with
width/height ... ;) and with low
Finally the loader is animated with
keyframes, and use
- All of the icons are from here, it's 100% font and no images ! -