How to Create Social Media Icons with CSS3

Its being so long when I posted a Pure CSS3 article i.e. Sexy Image Hover Effect. So, today I came up with some social site icons made in only CSS3. No images are used for this. To create social icons I have used gradient,radius property.
Here is the snapshot of social media icons about which I’m talking about.

To view the original output please visit Social Media Icons CSS3 DEMO

Now let go through the code.

Common CSS

.common{
	text-shadow:0 -2px 0 rgba(0, 0, 0, 0.5);
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	height:32px;
	width:32px;
	text-align:center;
	-moz-box-shadow:2px 2px 4px #ABABAB;
	-webkit-box-shadow:2px 2px 4px #ABABAB;
	cursor:pointer;
	margin-left:30px;
}

FACEBOOK:

HTML

<div id='facebook' class='common'>
        <span>f</span>
</div>

CSS

#facebook{

	float:left;
	background:-moz-linear-gradient(center top , #4AA9ED, #2E73B8) repeat scroll 0 0 transparent;
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #4AA9ED),color-stop(1, #2E73B8));
	border:2px solid #518EC4;
	color:#FEFEFE;
	font-family:arial,Times New Roman;
	font-size:28px;
	font-weight:bold;
}
#facebook span{

}
#facebook:hover{
	background:-moz-linear-gradient(center top , #4FB8FF, #378CDF) repeat scroll 0 0 transparent;
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #4FB8FF),color-stop(1, #378CDF));
}
#facebook:active{
	background:-moz-linear-gradient(center top , #378CDF, #4FB8FF) repeat scroll 0 0 transparent;
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #378CDF),color-stop(1, #4FB8FF));
}

Twitter:

HTML

 <div id='twitter' class='common' >
    <span>t</span>
  </div>

CSS

#twitter{

	float:left;
	background:-moz-linear-gradient(center top , #C0F0F2, #6FCFCE) repeat scroll 0 0 transparent;
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #C0F0F2),color-stop(1, #6FCFCE));
	border:2px solid #78D1D7;
	color:#FEFEFE;
	font-family:PicoWhiteRegular,arial,Times New Roman;
	font-size:30px;
}
#twitter:hover{
	background:-moz-linear-gradient(center top , #BFFDFF, #86EAEF) repeat scroll 0 0 transparent;
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #BFFDFF),color-stop(1, #86EAEF));
}
#twitter:active{
	background:-moz-linear-gradient(center top , #6FCFCE, #C0F0F2) repeat scroll 0 0 transparent;
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #6FCFCE),color-stop(1, #C0F0F2));
}

Here I have just given Facebook and Twitter CSS. Click  download button below to download the files.

I really had a great time in building these icon , hope you guys like them .Please drop some comments here…CSS3 social media icons, CSS3 social media icons, CSS3 social media icons, CSS3 social media icons, CSS3 social media icons, CSS3 social media icons, CSS3 social media icons