Tutorials, Works

Create Social Media Icons in Pure CSS

Mar 09, 2010 insic 123 Comments

Today I am experimenting with CSS3. I decide to recreate some of the social media icons using only CSS and HTML markup. Nothing is new here actually, except I’m having fun in doing the icons. And I will share to you the result.

And please not this is only tested in latest version of Webkit and Mozilla (v3.6).

View the Demo

The sample markup used in creating the NetVibes icon.

The CSS used to style the icon

I also created linkedin, urkot, delicious, flickr and google. Check the demo and tell me what you want to add.

View the Demo

I am using the new CSS properties like border-radius, text-shadow, box-shadow and gradients in creating the icons.

A Great tutorial about CSS3 gradients and the benefit of using it, are well explained by Chris Coyier in this post (Speed Up with CSS3 Gradients).

About the author: insic

Subscribe in my RSS Feed for more updates on Web Design and Development related articles. Follow me on twitter or drop a message to my inbox.