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.