Ajax Loader
×

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 ! -

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    Nice CSS3 Downloader

    CSSDeck G+