How to Create Social Media Icons with CSS3


Its being so long when I posted a Pure CSS3 article i.e. Sexy Image Hover Effect. So, today I came up with some social site icons made in only CSS3. No images are used for this. To create social icons I have used gradient,radius property.
Here is the snapshot of social media icons about which I’m talking about.

To view the original output please visit Social Media Icons CSS3 DEMO

Now let go through the code.

Common CSS







Here I have just given Facebook and Twitter CSS. Click  download button below to download the files.

I really had a great time in building these icon , hope you guys like them .Please drop some comments here…CSS3 social media icons, CSS3 social media icons, CSS3 social media icons, CSS3 social media icons, CSS3 social media icons, CSS3 social media icons, CSS3 social media icons



  1. Beben Koben

    March 10, 2012 at 7:48 pm

    thank you for the great tips 🙂

  2. Plamen

    February 14, 2012 at 10:08 pm

    Download link doesn’t work. I really want to see if this work. I enter the code, but i see only “f” – from here: f

    • Pankaj

      February 15, 2012 at 8:59 am

      Thanks for letting us know. Download link is working now. If you still feel any issue with download, you may download it here.

      • Ruud Hein

        March 5, 2014 at 9:28 am

        Looks very promising but the download & demo links don’t work. Would be really interested to have a look!

        • Admin


          March 7, 2014 at 7:20 pm

          Download Link updated again. 🙂

          • Ruud Hein

            March 14, 2014 at 5:14 am


            WOuld you have an email icon maybe too?

            • Admin


              March 18, 2014 at 10:01 am

              Not yet. But you can make it easily 🙂

  3. jenessa

    December 8, 2011 at 5:06 pm

    its very good man. now i can use this in Web Design Sheffield

Leave a Reply

Your email address will not be published. Required fields are marked *

To Top

Get More Stuff Like This

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.

This information will never be shared for third part