Social Icons in CSS3

by on 30/04/10 at 11:52 pm

After Beautiful sunset wallpaper , I came up with some social site icons made in only CSS3.For those icons I have used gradient,radius property.
Below I have attached the snapshot , to view the original output please visit DEMO.

Social Icons

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

Linkedin:

HTML

 <div id='linkedin' class='common' >
    <span>in</span>
  </div>

CSS

#linkedin{
background:-moz-linear-gradient(center top , #71B9D6, #0074A6)
                 repeat scroll 0 0 transparent;
background:-webkit-gradient(linear,left top,left bottom,
                 color-stop(0, #71B9D6),color-stop(1, #0074A6));
border:2px solid #245B91;
color:#FEFEFE;
font-family:Century Gothic,arial,Times New Roman;
font-size:25px;
font-weight:bold;
float:left;
display:block;
}
#linkedin:hover{
background:-moz-linear-gradient(center top , #77CDEF, #0B8CBF)
                  repeat scroll 0 0 transparent;
background:-webkit-gradient(linear,left top,left bottom,
                 color-stop(0, #77CDEF),color-stop(1, #0B8CBF));
}
#linkedin:active{
background:-moz-linear-gradient(center top , #0074A6, #71B9D6)
                  repeat scroll 0 0 transparent;
background:-webkit-gradient(linear,left top,left bottom,
                 color-stop(0, #0074A6),color-stop(1, #71B9D6));
}

Twitter:

HTML

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

CSS

#twitter{
margin-left:10px;
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:PicoWhite,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 Linkedin and Twitter CSS.You can download complete CSS and Html file from here(.rar) or here(.zip).
I really had a great time in building these icon , hope you guys like them .Please drop some comments here.

27 Responses to “Social Icons in CSS3”

  1. Vivek

    May 1st, 2010

    Awesome buddy , this was pretty nice thing and as no images so faster loading times . Build some more of this stuff like CSS3 only buttons, gradients, containers etc. & you will be highly thanked by the design community including me :)

    • admin

      May 1st, 2010

      @thanks vivek … and surly you will find some interesting and useful post here soon …

  2. Stan

    May 1st, 2010

    Hay, cool, but I feel discriminated because I use Opera and had to go to another browser to see the demo. Same MS users, but who cares about them :P So I really think in a non-demo it should be:

    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    -opera-border-radius:5px;
    -ms-border-radius:5px;

    • admin

      May 1st, 2010

      thanks for the input. But this is just a showcase of possibilities of CSS3.
      But these browser specific styles will definitely be a big pain for web developer later on.

  3. Social icons in CSS3

    May 1st, 2010

    [...] full post on Hacker News If you enjoyed this article, please consider sharing it! Tagged with: CSS3 • [...]

  4. steve

    May 1st, 2010

    Very nice work. All the icons look beautiful

  5. Kyre

    May 1st, 2010

    This is brilliant. I wish I thought of it :) Thank you very much for posting this!

  6. Matt

    May 1st, 2010

    It’d be cool to see one for Yahoo Buzz :)

  7. MarkSpizer

    May 2nd, 2010

    great post as usual!

  8. Yassine

    May 4th, 2010

    I like everything on the post except the rar file ! please use a zip instead :D

  9. Luffy

    May 19th, 2010

    = ) Awesome!! So impressive works on CSS3. Nikesh

  10. nferrari

    Jun 23rd, 2010

    Hi, how to make it work with the Twitter font ?

  11. Joacim Boive

    Mar 22nd, 2011

    Nice work!

    You do get some benefits with this approach – like that the fidelity is kept even when user zooms in (like on a phone/pad). But it’s hardly something that will improve performance.

    There’s the extra download of the font (an additional request) and it’s a whopping 32kb. Put those images in a CSS sprite or better yet: Base64 encode them and include them in the stylesheet = NO extra request and maybe what? 10kb in filesize.

    Nice, creative work. But it’s not the best performance enhancer.

    /J

  12. slapstick

    Mar 22nd, 2011

    Me likes<3
    Thank you very much for the tutorial!

  13. NIKESH

    May 28th, 2011

    Thank you very much for the tutorial!

  14. nikesh

    May 28th, 2011

    @nikesh .. thanks for your comment .
    @TOFIK … thanks for this point …

  15. uk directory

    Jan 4th, 2012

    Hi my friend! I wish to say that this article is amazing, great written and include approximately all significant infos. I’d like to see extra posts like this .

  16. incodicsaisee

    Feb 6th, 2013

    -





    -

  17. Johnk479

    May 30th, 2014

    Thank you for your blog article. Great. babkfedcdddk

  18. syngenta

    Oct 21st, 2014

    Hi, i believe that i noticed you visited my weblog so
    i came to go back the want?.I am attempting to to find issues to enhance my site!I guess its ok to use a
    few of your ideas!!

  19. Anand

    Mar 4th, 2015

    Thank you

Leave a Reply