How to Create Social Media Icons with CSS3

CSS\Social Media

How to Create Social Media Icons with CSS3

By | December 6, 2011 at 9:53 am | 8 comments

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

{focus_keyword} How to Create Social Media Icons with CSS3 social icons css3

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.
{focus_keyword} How to Create Social Media Icons with CSS3 download button animated7
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

Tags:

8 Comments

  1. Beben Koben (2 years ago)

    thank you for the great tips :)

  2. Plamen (2 years ago)

    Download link doesn’t work. I really want to see if this work. I enter the code, but i see only “f” – from here: f

    • Pankaj (2 years ago)

      Thanks for letting us know. Download link is working now. If you still feel any issue with download, you may download it here.

      • Ruud Hein (1 month ago)

        Looks very promising but the download & demo links don’t work. Would be really interested to have a look!

        • Admin (1 month ago)

          Download Link updated again. :)

          • Ruud Hein (1 month ago)

            Outstanding!

            WOuld you have an email icon maybe too?

            • Admin (4 weeks ago)

              Not yet. But you can make it easily :)

  3. jenessa (2 years ago)

    its very good man. now i can use this in Web Design Sheffield

Comments

*