12 Fun Sharing Button Effects
Everyone loves eye candy and smooth CSS3 animations. This is why today we are sharing our latest experiment with you - a collection of effects for revealing sharing buttons. You can use them in your portfolio, image galleries and more!
How they're made
Most of the different transformations and effects on the demos are done exclusively via CSS, so they should appear bug and lag free (if you are running a modern browser). Here are some of the key components that made these effects possible:
- Transition - the transition property sets a duration of time in which CSS properties can transform their values gradually making HTML objects animate smoothly. Make sure to check out what its descendant properties do (such as "delay" and "timing-function") and how to use them to your advantage.
- Transform - this lets you move, rotate, scale and basically do anything with the dimensions and position of your HTML elements. It's powers aren't limited only to a 2D plane but also work in 3D.
- Filter - another new CSS3 feature that enables developers to apply photographic effects on images thus making them black-and-white, blurred, saturated, and so on. Note that this property still requires the "-webkit-" prefix and doesn't work in Firefox.
For one of the Demos we also used a fun jQuery plugin called jRumble. Give it a try - it's awesome!
We hope you enjoy our collections of effects. Check out all the demos and tell us which is your favorite. As always, if you have any suggestions, questions or just want to share with us similar stuff - leave a comment below.
The revolutionary web design tool for creating responsive websites and apps.Learn more
This is huge man.... Thanks :)
I can see a lot of good uses for this other than just sharing buttons. Thanks a lot!
Awesome effects...thanks a ton for sharing...Good Luck!!
...I'm integrating the "Future" example into a website right this very moment. Wanted to take a break to say THANKS!
This will become an important resource for visualizing the available Oauth providers for a given site. (That's what I'm currently using it for)
Hey, Thanks mate never saw such an extraordinary design totaly loved it . Thanks for sharing and help me to learn . A truly creative and out of box design .
God bless you
The 'Simple' effect was very nice!
Perfect stuff, Thanks!
AWESOME tutorial- thanks a million for this! Exactly what I've been looking for to spruce up our companies image gallery!
Very nice.. thanks a lot..
Daaaaammmn these are sick!!!
So awesome :)
Thanks for sharing.
That is really creative! Our team at CSSChopper is excited and thinking of new ways to implement this i