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.

28 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

  20. Nikole lovekin

    Oct 8th, 2016

    Hi there everyone, it’s my first go to see at this web site,
    and piece of writing is in fact fruitful in support of me, keep up posting such articles or reviews.

Leave a Reply