I’m proud to announce my latest CSS experiment—The CSS Social Buttons. They are not another "pure CSS3" or "HTML5 canvas" icons. These icons use the basic traditional background-image technique. The purpose of these icons is to provide a cross-browser, consistent and versatile CSS that can be applied in any design, app or theme. Basically, it is one master stylesheet that contains various design styles. It allows you to display many different button styles by combining the CSS classes.

View Demo CSS Buttons

Download Demo ZIP

css social icons

Implementation

To apply this CSS Social Icons to your site, download the demo zip and include the social-icons.css file to your site:


<link href="social-buttons.css" rel="stylesheet">

Option A: You need to add a .sb class (sb stands for social button) and the icon class (eg. twitter, facebook, rss, etc.) to the <a> link tag. Use this option if you want each button to have different style.


<a href="#" class="sb orange twitter">Twitter</a>
<a href="#" class="sb blue facebook">Facebook</a>

Option B: The .sb class can also be in the wrapping tag such as <p>, <div> or <ul> tag. The icon class (eg. twitter, facebook, rss) is required inside the <a> tag. Use this option if you want the buttons to have one consistent style.


<p class="sb gradient blue">
	<a href="#" class="twitter">Twitter</a>
	<a href="#" class="facebook">Facebook</a>
</p>

<ul class="sb circle gray text">
	<li><a href="#" class="twitter">Twitter</a></li>
	<li><a href="#" class="facebook">Facebook</a></li>
</ul>

Available CSS Classes

Below is a list of the classes available. You can specify as many classes as you want. It is very versatile. You can mix and match the styles to produce many possible results. For example, you can have "large blue gradient glossy embossed text thick-border" all in one button. Check the demo to see examples.

Sizes

  • default = 34px
  • small = 28px
  • large = 42px

Colors

  • blue
  • purple
  • red
  • green
  • orange
  • brown
  • black
  • gray
  • light-gray
  • light-blue
  • light-purple
  • pink
  • light-green
  • yellow

Styles

  • min = minimal style, no background or border
  • flat = no rounded corners and box shadows
  • circle = circle style
  • embossed = embossed style
  • pressed = pressed like style
  • thick-border = thicker border stroke
  • no-border = remove border
  • no-shadow = remove box-shadow
  • gradient = the gradient is applied to the :after element
  • glossy = the glossy overlay gradient is added to the :before element
  • text = display icon with text

Icons

  • twitter
  • facebook
  • heart
  • linkedin
  • pinterest
  • podcast
  • rss
  • share_this
  • star
  • vimeo

How to Add Your Own Icons

Because there are too many social networks, I’ve only included some basic icon classes in the demo to keep the social-icons.css file small. You can add more icon classes with the following sample CSS code (don’t forget to add the .sb blass in your link tag <a href="#" class="sb youtube">):


a.sb.youtube {
	background-image: url(images/youtube.png);
}
a.sb.email {
	background-image: url(images/email.png);
}

Download More Icons

The icons used in the demo are from the free Mono Social Icons where you can download from IconDock. The vector EPS version is included in the set. The other matching icons are from the Rocky icon set.

How to Override the Button Size & Background Color

You can override the button size and backgound with the following CSS code:


a.sb {
	width: 36px;
	height: 36px;

	background-color: #666;
}

How to Add Custom Gradients

The gradient background is applied to the :after pseudo element. You can generate more gradients using this Ultimate CSS Gradient Generator. Note that SVG gradient is required for Internet Explorer 9 as it does not support native CSS3 gradient.


a.sb.gradient.custom:after {
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I4YzZkZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2ZDg4YjciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background-image: -moz-linear-gradient(top,  #b8c6df 0%, #6d88b7 100%);
	background-image: -webkit-linear-gradient(top,  #b8c6df 0%,#6d88b7 100%);
	background-image: linear-gradient(top,  #b8c6df 0%,#6d88b7 100%);
}

How to Create Your Own Styles

You can also override the default social-icons.css to create your own styles. The following custom icon class uses the styles from the .gradient class but overrides the :after background-image with a custom image.


/* custom icon */
a.sb.custom {
	width: 80px;
	height: 80px;
	
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
}
a.sb.custom:after {
	background-image: url(images/custom-bg.png);

	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
}

/* custom icon blue */
a.sb.custom.blue {
	border-color: #96a8af;
}
a.sb.custom.blue:after {
	background-image: url(images/custom-bg-blue.png);
}
/* custom icon pink */
a.sb.custom.pink {
	border-color: #b0a1aa;
}
a.sb.custom.pink:after {
	background-image: url(images/custom-bg-pink.png);
}

/* custom icon background images */
a.sb.custom.retweet {
	background-image: url(images/custom-icon-retweet.png);
}
a.sb.custom.photo {
	background-image: url(images/custom-icon-photo.png);
}
a.sb.custom.comment {
	background-image: url(images/custom-icon-comment.png);
}
css social icons

Browser Compatibility

The basic styles work on any browser. The CSS3 effects such as: rounded corners, gradient, glossy, pressed, and embossed styles work on any browser that supports CSS3 such as Chrome, Firefox, Safari, and IE9.

Free Licensing

It is 100% free for any purpose. Feel free to extend and share it.

114 Comments

Kev Adamson
Mar 6, 2012 at 5:02 am

Very useful Nick. Bookmarked :)

Katherine
Mar 6, 2012 at 5:16 am

Also bookmarked – so handy!

Abdelhadi Touil
Mar 6, 2012 at 5:22 am

Very interesting! Thanks also for very nice license to use and share it :)

Best Funny One liners on life
Jun 11, 2012 at 4:01 am

I agree with you. These are awesome social buttons and can share them with others too.

Cas Cornelissen
Mar 6, 2012 at 7:18 am

Nice set, but I think you misspelled Circle in the image ;)

Jauhari
Mar 6, 2012 at 8:55 am

Thanks.. I will use it…

Koviko
Mar 6, 2012 at 9:37 am

This is classic false advertising. Why would you call these “CSS Social buttons?” If anything, call them “simple” or “minimalist.” “CSS” is not the right adjective for this.

Katie
Mar 6, 2012 at 2:45 pm

These are CSS buttons. Did you read the full article? I feel like you looked at the first set of images and got upset that you had to download files. Just because you use images does not mean they are not CSS buttons. He did not deceive by saying “Pure CSS Buttons”, in fact it is even stated in the beginning paragraph that these use the traditional background-image technique and is a way to stay mostly cross-browser friendly.

Koviko
Mar 6, 2012 at 2:55 pm

“Did you read the full article” is not a defense and is the reason that I think the article’s title is false advertising. I enjoyed the article, but the only reason that I came here was to be impressed with the icons somehow built in CSS. The only CSS here is the design of the buttons. The fact that the clarification needs to be made in the first paragraph should be a sign that the title is inadequate.

Do you not agree that “Simple Social Buttons” would have been a more appropriate title for this post?

Lineypi
Mar 6, 2012 at 9:08 pm

I really don’t agree that ‘simple social buttons’ would be a more appropriate name. In my opinion, that would imply that the entire button is simply a premade graphic. I’m 100% confident that if you search for ‘simple social buttons’ in Google then that’s what you’ll turn up with.

The title CSS Social Buttons makes perfect sense to me. You argue that ‘the only CSS here is the design’ – well I’m sorry, but isn’t that what CSS is all about? Building an adva nced design around simple html and minimal graphics?

nico
Mar 7, 2012 at 11:49 am

Oh boy, you are right! Let’s whine some more because you had to open a webpage thinking it was proposing something different.

You select the size/color/type of button via CSS hence, believe it or not, they are buttons creating by using CSS.

Emilio Cobos
Mar 6, 2012 at 9:42 am

Awesome, great job.

Pedro Ivo Hudson
Mar 6, 2012 at 10:03 am

And what about icon fonts for version 2.0? (:

David Maciejewski
Mar 6, 2012 at 10:52 am

I miss the Google+ icons. ;-)

Mike Ambrozaitis
Mar 6, 2012 at 11:04 am

There is some weirdness that happens with the color gradient options in IE8, that is usually my go to test for cross browser support. Sadly as designers we still have to accept the fact that older versions of IE are out there and they tend to misbehave.

Franklin Manuel
Mar 6, 2012 at 11:18 am

Hey Nick, as usual another great tutorial.

P.S – Typo in the third line “HMTL5 canvas”

Adrian
Mar 6, 2012 at 12:48 pm

Here are colored version of social icons http://designmodo.com/free-social-media-icon-set/

Stev Newbury
Mar 6, 2012 at 4:29 pm

great article! nice looking, simple to use buttons! I will certainly share what I found here!

Hoque
Mar 6, 2012 at 10:52 pm

Easy to implement. Well explained.

Web Design
Mar 7, 2012 at 4:55 am

Very nice tutorials! Its covering full implementation for beginners as well as expert. Thanks for the post.

Paul
Mar 7, 2012 at 5:09 am

Awesome thanks for theses.

Beben Koben
Mar 7, 2012 at 1:28 pm

cheers, ty for your kindness ☻

Gary
Mar 8, 2012 at 2:38 am

Can’t wait to try these CSS buttons. Awesome to use in place of images.

Jasa pembuatan web
Mar 8, 2012 at 10:48 am

Simple and usefull. Thanks dude :)

Will
Mar 9, 2012 at 6:07 am

Love it! :D

wall321
Mar 9, 2012 at 7:15 am

Desktop Wallpaper, HD Wallpaper, Wallpaper Background
Desktop Wallpaper

McBenny
Mar 9, 2012 at 7:30 am

Nice but I wouldn’t use it until all of your images are grouped into one single image and using sprites!
You would save dozens of HTTP requests and probably some useful bytes too.

HTH

Janus
Mar 9, 2012 at 9:45 am

It’s not anybody thats need all the icons, so I think the way Nick created this is the best way.

Jonathan
Mar 9, 2012 at 8:09 am

It’s a nice share, but still if i were to add socialbuttons to my site i’d create them myself to keep the code-size down. Nice to use as a base tho and strip down to the essentials!

Felipe Bueno
Mar 9, 2012 at 11:27 am

You could just cut off the parts you don’t need.

Lyndsy Simon
Mar 9, 2012 at 12:37 pm

That would require changing the CSS too, so the background wasn’t offset as much.

Easier would be to simply color everything except the items you need white. That should allow the file to be much smaller while maintaining its dimensions.

BLAZ
Mar 9, 2012 at 9:43 am

GREAT WORK! W CSS3!

Wesley Burden
Mar 9, 2012 at 10:18 am

Lovely and clean design, I wish i found these this morning as I was searching for exactly this!

Thanks for sharing your work

Robin
Mar 9, 2012 at 10:44 am

No myspace logos?

Cesar
Mar 9, 2012 at 10:49 am

What is myspace? (:

Richard
Mar 9, 2012 at 12:48 pm

Would be nice to have this on a reliable CDN..

Jen
Mar 9, 2012 at 2:04 pm

This is fantastic – thanks so much for sharing your work!

Dirk Schembri
Mar 9, 2012 at 6:40 pm

Interested in having your social networking vary from the usual? This is a great guide to get you started to a unique social plugin.

Further Social plugin development and design can be found at Web Design Malta.

Oliver
Mar 11, 2012 at 4:11 pm

Very nice. Thank you for sharing,

s2w
Mar 11, 2012 at 8:54 pm

nice, would fit perfectly for my sites social bookmarking….thanx:)

Website Design Las Vegas
Mar 12, 2012 at 1:24 am

This was really an amazing. Love to see it. Keep sharing such more.

Dylan Cook
Mar 12, 2012 at 6:46 am

Hmmm just wondering, would using a font such as Socialico (http://fontfabric.com/social-media-icons-pack/) be an alternative? I know the icon images aren’t very big, but using a font opens up hover state colours etc just using code.

Or am I making more work?

Wandspiegel
Mar 12, 2012 at 7:11 am

great work!!! thanks for sharing… :-)))

Kreativ Theme
Mar 13, 2012 at 1:28 am

Some other guys are selling css social button on codecanyon … but who cares since you can get it fre here … Thanks a lot :)

Catalin
Mar 14, 2012 at 6:06 am

really great. Can’t wait to try them. thanks :)

lw6090
Mar 17, 2012 at 3:17 am

great designs

Logoswish
Mar 18, 2012 at 9:18 am

Great work, love gray color. Looks very professional. Thank you.

pearl
Mar 18, 2012 at 3:23 pm

Awesome job and thanks

wallpaper
Mar 18, 2012 at 9:42 pm

Awesome job and thanks HD Wallpaper

ALT
Mar 19, 2012 at 1:49 am

“It is 100% free for any purpose.” Love freebies, thanks for sharing.

BestTemplatesStock
Mar 20, 2012 at 6:02 am

Nice work, definitely will use it in my next template, and give you credentials.

Mike
Mar 20, 2012 at 8:11 am

This is fantastic. You don’t often see freebies like this with the CSS implementation. Thanks!

Katherine
Mar 21, 2012 at 2:20 am

Loved them but would have loved them more if there were colored.

Thanks anyway for sharing this wonderful post. =)

Pawel
Mar 21, 2012 at 9:17 am

Great collection, thanks for sharing!

Arcelik
Mar 23, 2012 at 1:43 am

very useful sharing thanks.

kim
Mar 23, 2012 at 10:25 am

thanks heaps.

Debbs Hosting
Mar 25, 2012 at 1:16 am

Wow! Thanks for the thorough discussion and elaboration. I know a lot of blogs are incorporating social buttons now so it’s great that there are guides like yours that are easy to understand and implement.

ImpressionWebStudio
Mar 26, 2012 at 2:57 am

very quality post, thx

Manoj Singh
Mar 29, 2012 at 6:45 am

Good! this is great for CSS Social Buttons beginners like me. keep up the good work!

ısı yalıtımı
Mar 29, 2012 at 7:53 am

Very good. Thank you.

Tárcio Zemel
Mar 29, 2012 at 9:30 am

Great job! Great icons!

Regards!

David
Apr 3, 2012 at 2:04 am

Great work!

Colin Scott-Fleming
Apr 3, 2012 at 2:38 pm

If you don’t want to mess with images at all, you could also check out this web symbol typeface!

http://www.justbenicestudio.com/studio/websymbols/

dezebo
Apr 9, 2012 at 11:42 am

Interested in having your social networking vary from the usual? This is a great guide to get you started to a unique social plugin.

Think360studio
Apr 16, 2012 at 5:45 am

Great collection. Thanks for sharing such Css social buttons and for downloader facility.

Dillon
Apr 17, 2012 at 6:18 am

Amazing :)

Florian
Apr 18, 2012 at 1:59 am

Why didn’t you add a Google+ Icon too?

Ropascal Edmund
Apr 25, 2012 at 7:15 am

Florian, google+ is lame, nobody uses it. Does someone knows a collection of social buttons but colored and more fancy? Please reply. PS: Without google+ is fine :))

Saru
May 24, 2012 at 4:44 am

You sound like an annoying Facebook fanboy.

sezindiainvest
Apr 27, 2012 at 6:07 am

great collection of social button….

Bella Kristen
Apr 27, 2012 at 10:19 pm

Awesome collections of Icon set.But you could have designed with more colors to attract.So professional.

adi saputra
Apr 30, 2012 at 12:50 am

it’s so beautifully,.,.
thanks,.,.

magazin
Apr 30, 2012 at 12:53 pm

This does look like a great theme.

Serit LED
Apr 30, 2012 at 7:12 pm

perfect . aydinlatma, serit led, rgb led, rimak aydinlatma, tasarruflu ampul, led lamba

Lorenz
May 2, 2012 at 12:14 pm

Nick, they are very lovely. Thanks for sharing them.

jenny
May 23, 2012 at 7:06 pm

really awesome buttons templates

طراحی سایت
May 8, 2012 at 12:44 am

I needed it

Kiefer
May 12, 2012 at 12:08 pm

loved all of them Nick! thanks for share!

lili
May 14, 2012 at 3:16 pm

What about Fancy button? thefancy.com

양금일
May 18, 2012 at 1:51 am

전 초보인데 사용할수 있을란지요 그냥 받아서 설치하면 몰라도 어렵네요

Emilio Bravo
May 20, 2012 at 5:40 pm

Great buttons, but I have a problem with gradients. If the element is wrapped inside a div with a background color, the gradients wont work, instead the button background will be transparent.

nispaarasolutions
May 25, 2012 at 6:41 am

Nice Button Template Collection!!!!!!!!!!!!!!!!!!
Thanks for sharing

Holt Johnson
May 25, 2012 at 11:00 am

b-e-a-u-ti-ful

john
May 25, 2012 at 5:57 pm

should add youtube and google+

webdesigneria
May 30, 2012 at 2:07 pm

Good! this is great for CSS Social Buttons beginners like me. keep up the good work!

Michael Aubry
May 30, 2012 at 9:18 pm

I think this is great work! But more importantly (designers and bloggers pay attention) notice how he is giving away a free download, very cool and I think this is a tip all of us that own a website should follow, I am going to start giving away a freebie on a weekly basis!

Thiết kế lô gô
Jun 3, 2012 at 10:33 pm

It just goes to show how powerful CSS3 can be for creating something so simple and yet so useful.

Owen
Jun 7, 2012 at 5:27 am

This looks amazing, will implement in my current Bootstrap-based project. Thanks!

Best Funny One liners on life
Jun 11, 2012 at 3:59 am

These are awesome social buttons. Thanks. I have downloaded them and will use.

johanso
Jun 15, 2012 at 5:40 pm

Very Very good. thank you..

zavera
Jun 18, 2012 at 2:18 am

These are very helpful to make a easy write any thing which you wanna be its great to use them!

Sorocaba
Jul 6, 2012 at 3:42 pm

Just love it!

igneta
Jul 11, 2012 at 3:04 am

woow. Thanks.

Beylikduzu Arcelik
Jul 12, 2012 at 6:34 pm

thank you.
beylikduzu arcelik servisi, beyaz esya, istanbul beylikduzu servis arcelik

cena
Jul 19, 2012 at 2:51 am

very good button and your site look a profesional site good sharing

lisa
Jul 27, 2012 at 2:37 am

thank you
good sharing

Alquiler yates Ibiza
Jul 30, 2012 at 3:19 am

I would love to go! sounds like a lot of fun

lanzik
Aug 3, 2012 at 7:30 am

I cant use this in my site:( please help

plyuwa
Aug 6, 2012 at 11:17 am

Thank you very much for there! I will try them soon!

thiet ke logo
Aug 14, 2012 at 3:45 am

This content is constructed for thinking readers. I found this to be interesting, for lack of a better word and contains excellent points. Thank you….

jenny
Aug 27, 2012 at 9:20 pm

these social buttons are awesome, recommended for ma all designing students

Peter
Aug 29, 2012 at 8:32 am

Can i use that icons in commercial project ? Thanks

Peter
Aug 29, 2012 at 8:37 am

I’m sorry I didn’t read to the end

seo
Aug 30, 2012 at 3:00 am

I’m a web designer and would love to attend! Thanks (:

Celso Junior
Sep 16, 2012 at 2:13 pm

Well done! I’ve made use of it in my simple web page template. Thanks for sharing ;)

Manoj Singh
Sep 17, 2012 at 4:55 am

Thanks for resource. Just love it!

Loma Bellrichard
Sep 21, 2012 at 5:22 am

MODREATE A WORKING ENTRY PROGRAM FOR YOUR CONTEST

Barry Reynolds
Nov 20, 2012 at 6:31 am

That’s a nice technique and easy to implement into several website with the varying colour schemes. Thanks.

Uddhab
Nov 28, 2012 at 1:07 am

Please add Google Plus icon to the mono social icon pack.
Thank you..

Sunny
Jan 29, 2013 at 2:19 pm

thanks for share! it was helpful, keep on posting.

ululf01
Feb 1, 2013 at 12:19 am

wow nice, thanks

Post Comment or Questions

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.