PDA

View Full Version : Social Media Buttons


Crumpy1
11-19-2012, 11:39 AM
Hi All,

I would like to create the same effect for my social media buttons as here http://www.fitandfruity.co.uk/herbalife-radiant-c/.

I have google for ages but cannot find this effect.

Can anybody tell me how this is done?

Thanks

Corrosive
11-19-2012, 11:55 AM
It is just shifting a background image up on hover with some CSS3 transitions to make it smooth in decent browsers. To get the effect you should start with Googling 'CSS Sprites' to get the image stuff sorted and then 'CSS3 Transition Effects' to get the pretty stuff. Hope that helps :)

Crumpy1
11-19-2012, 05:00 PM
It is just shifting a background image up on hover with some CSS3 transitions to make it smooth in decent browsers. To get the effect you should start with Googling 'CSS Sprites' to get the image stuff sorted and then 'CSS3 Transition Effects' to get the pretty stuff. Hope that helps :)

Thanks Corrosive for the information, i looked everywhere for a plugin, but i will definitely look at the options above for instructions on how to do this.
Thanks!!

Ricky55
11-24-2012, 12:50 PM
Better still don't use images. Use a font! That way you don't have pixelation on retina. Especially for icons this simple, i.e. one flat colour. Also less band width.

See http://css-tricks.com/video-screencasts/113-creating-and-using-a-custom-icon-font/

If you do want to use images then a sprite sheet is the way to go.