CSS Social Buttons

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

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

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 link tag. Use this option if you want each button to have different style.

TwitterFacebook

Option B: The .sb class can also be in the wrapping tag such as

,

or

tag. The icon class (eg. twitter, facebook, rss) is required inside the tag. Use this option if you want the buttons to have one consistent style.




TwitterFacebook





• Twitter


• Facebook



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.

default = 34pxsmall = 28pxlarge = 42pxbluepurpleredgreenorangebrownblackgraylight-graylight-bluelight-purplepinklight-greenyellowmin = minimal style, no background or borderflat = no rounded corners and box shadowscircle = circle styleembossed = embossed stylepressed = pressed like stylethick-border = thicker border strokeno-border = remove borderno-shadow = remove box-shadowgradient = the gradient is applied to the :after elementglossy = the glossy overlay gradient is added to the :before elementtext = display icon with texttwitterfacebookheartlinkedinpinterestpodcastrssshare_thisstarvimeo


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.sb.youtube {background-image: url(images/youtube.png);}a.sb.email {background-image: url(images/email.png);}


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.




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

a.sb {width: 36px;height: 36px;background-color: #666;}


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%);}


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);}


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.




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




View the original article here