Below is a list of the classes available. You can specify as many classes as you want. It is very ve

Coding CSS design design video maker process Design Trends Downloads event Flash free freebies Guest Posts Illustrator inspiration interview Javascript jobs photoshop Photoshop tutorials Responsive Design review SEO software talented people updates WordPress About Contact Archives
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 video maker stylesheet that contains various design styles. It allows you to display many different button styles by combining the CSS classes.
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 video maker
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 video maker forget to add the .sb blass in your link tag <a href="#" class="sb youtube">): a.sb.youtube { background-image: url(images/youtube.png); video maker } 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
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 video maker CSS3 gradient. a.sb.gradient.custom:after { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I4YzZkZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2ZDg4YjciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background-image: video maker -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%); video maker } 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 *