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

1 3 4 5
  1. Sorocaba
    Jul 6, 2012 @ 3:42 pm

    Just love it!

    Reply

  2. igneta
    Jul 11, 2012 @ 3:04 am

    woow. Thanks.

    Reply

  3. Beylikduzu Arcelik
    Jul 12, 2012 @ 6:34 pm

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

    Reply

  4. cena
    Jul 19, 2012 @ 2:51 am

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

    Reply

  5. lisa
    Jul 27, 2012 @ 2:37 am

    thank you
    good sharing

    Reply

  6. Alquiler yates Ibiza
    Jul 30, 2012 @ 3:19 am

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

    Reply

  7. lanzik
    Aug 3, 2012 @ 7:30 am

    I cant use this in my site:( please help

    Reply

  8. plyuwa
    Aug 6, 2012 @ 11:17 am

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

    Reply

  9. thiet ke logo
    Aug 14, 2012 @ 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….

    Reply

  10. jenny
    Aug 27, 2012 @ 9:20 pm

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

    Reply

  11. Peter
    Aug 29, 2012 @ 8:32 am

    Can i use that icons in commercial project ? Thanks

    Reply

  12. Peter
    Aug 29, 2012 @ 8:37 am

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

    Reply

  13. seo
    Aug 30, 2012 @ 3:00 am

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

    Reply

  14. Celso Junior
    Sep 16, 2012 @ 2:13 pm

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

    Reply

  15. Manoj Singh
    Sep 17, 2012 @ 4:55 am

    Thanks for resource. Just love it!

    Reply

  16. Loma Bellrichard
    Sep 21, 2012 @ 5:22 am

    MODREATE A WORKING ENTRY PROGRAM FOR YOUR CONTEST

    Reply

  17. Barry Reynolds
    Nov 20, 2012 @ 6:31 am

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

    Reply

  18. Uddhab
    Nov 28, 2012 @ 1:07 am

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

    Reply

  19. Sunny
    Jan 29, 2013 @ 2:19 pm

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

    Reply

  20. ululf01
    Feb 1, 2013 @ 12:19 am

    wow nice, thanks

    Reply

1 3 4 5

Leave a Reply

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