Life's easy with Medialoot.

Unlimited access for only $14/mo.

Free CSS3 Social Media Buttons

Free download CSS only social media icon buttons
Free download CSS only social media icon buttons

Our free offering this week is a set of social media buttons created entirely with CSS3. No images were harmed or used in the creation of these buttons, so the result is a set of beautiful buttons that look great whether you view them at their native size, smaller than that, or if you zoom in 6400%. If you’re wondering how this is possible, we have created a web font containing the social media glyphs especially for this resource (included in the package). Have fun with these!

Live Preview

View the buttons in action.

Updated - January 13 2014

In this update we have completely recreated the whole set from scratch using simpler, more valid CSS, and now include Photoshop, Illustrator and other vector source files.

Free License

Feel free to download and use this item for both personal and commercial projects with attribution back to MediaLoot. Please note:

  • Attribution is required for free items. For a non-attribution license, please become a member or buy the full version.
  • You may not distribute or offer this set for download on other websites. Promotion is always appreciated, but please send people to this page.

More from User Interface » Design Elements

Oct 19th 16704 10
Free
Oct 13th 2237 1
Free

Comments

  • Reply »
    Alex

    Alex

    What a great sharing, thanks so much!

    May 16, 2012 at 11:53 am
  • Reply »
    Carlos Andres Cortes

    Carlos Andres Cortes

    Absolutely awesome!!! made round icons just by changing:
    radius:3px; to radius:22px; in CSS

    May 16, 2012 at 12:01 pm
  • Reply »
    Paul endaya

    Paul endaya

    nice share..thanks for being generous..

    May 16, 2012 at 2:20 pm
  • Reply »
    Brendan Pascale

    Brendan Pascale

    Awesome! Thanks

    May 16, 2012 at 4:10 pm
  • Reply »
    Peter Simmons

    Peter Simmons

    Thanks for the share, when I tried installing the ttf font on my mac (10.7) it complained about name table usability and name table structure and didn’t install correctly. Seems to work in web browser though but thought I’d let you know.

    May 16, 2012 at 4:37 pm
  • Reply »
    Tony Thomas

    Tony Thomas

    Thanks for the comments!

    @Carlos Andres Cortes: that’s a great tip, thanks for sharing.

    @Peter Simmons: no need to install the font, it should just work as long as the CSS can find the font files. We have put WebOnly protection on the font too so that it can’t be installed as it is.

    May 16, 2012 at 4:46 pm
  • Reply »
    Nina Meiers

    Nina Meiers

    Beautiful and elegant, an an evergreen contribution to the Social Networking look and feel we are seeing in the future.

    May 16, 2012 at 7:58 pm
  • Reply »
    Emmanuel

    Emmanuel

    Thanks for this…

    May 17, 2012 at 5:17 am
  • Reply »
    Elena MBelda

    Elena MBelda

    Perfect! Thanks a lot.
    I’m going to share this on my blog

    May 17, 2012 at 5:34 am
  • Reply »
    Myra

    Myra

    Thanks for all the great freebies. So much appreciated :)

    May 17, 2012 at 9:53 am
  • Reply »
    Lynn Cummings

    Lynn Cummings

    Very clever. Thanks!

    May 17, 2012 at 8:07 pm
  • Reply »
    Carlos

    Carlos

    Hello

    Thanks a lot for the sharing. They look like really awesome. I would like that someone can help me to use them. I am not programer and not know where to copy the code. I use wordpress for my sites, but never have written code lines.

    Thanks to everybody

    May 17, 2012 at 10:32 pm
  • Reply »
    Jon

    Jon

    Very nice work, and your demo CSS is very easy on the eyes. Can’t wait to use these on our next project, thank you!

    May 18, 2012 at 4:53 am
  • Reply »
    JHN

    JHN

    Nice Glyphs and very easy to integrate in any website as the layout is fully customizable. perfect ! thanks

    May 18, 2012 at 4:38 pm
  • Reply »
    Rey

    Rey

    “No images were harmed” That was funny!
    Thanks for the buttons.

    May 19, 2012 at 2:55 am
  • Reply »
    mike stinson

    mike stinson

    Hey Tony,

    how can i use them as hover from grey to colored (a slow transition that happens).
    what we call that type of action?

    im also a graphic designer but dont know much about that css stuff.

    May 21, 2012 at 11:38 am
  • Reply »
    Tony Thomas

    Tony Thomas

    Hi Mike

    Yeah that should be pretty easy. Assuming a basic understanding of css here: just copy and paste the class so you have two sets of the same properties, then add :hover to one and change the background to grey on the other.

    For the transition look into CSS3 Transitions.

    May 22, 2012 at 4:13 am
  • Reply »
    Emmanuel

    Emmanuel

    Please how and where do I learn CSS fully? I’m really interested in it.

    May 22, 2012 at 4:22 am
  • Reply »
    Tony Thomas

    Tony Thomas

    @Emmanuel there are lots of free resources and tutorials online to help you learn CSS. W3Schools is probably a good place to start.

    May 22, 2012 at 4:54 am
  • Reply »
    Jordan  Arscott

    Jordan Arscott

    Hi,

    I have a paid subscription to MediaLoot and the “Files included” mentions an OTF file. I can’t find it in the downloads at all.

    It would be nice if you could include that so I can implement them into my designs as fonts so my CSS guy knows exactly how I want them.

    May 24, 2012 at 2:10 pm

 1 2 > 

Leave a comment

Tag Cloud

Don't Miss Another Freebie - Sign Up for Our Newsletter!

Make sure you don't miss out on future free resources by signing up for our weekly newsletter.

Sign up to our Newsletter

Get site updates, freebies, and MediaLoot news.

Contact Us

Suggest a resource

FAQ

Attribution for free resources must be provided in conjunction any time the freebie is used, on the same page where the resource appears on your design. Or, you can purchase a premium version of the free resource.

See all