Handle Your Social Network Links Like A Pro

Social networks can be a great way to connect with friends, colleagues, and reach out to new customers.

Links to one’s profile or account on their favorite networks are quite common on that person’s website. This can be done with a text link, or as most people prefer, the network’s logo.

To go even further with the logos, create the image link with a hover equivalent of another slightly edited version of the same image. That’s exactly what this tutorial is about.

A great set of free icons is available from Icon Dock, some of which I’m using in the demo.

There are several ways to do this that look sweet, including a black and white logo that shows a full color logo on hover, or the original with a lighter version on hover.

How to do it

Add a division with the class twitter, or whatever social network link you’re adding. Make a link to your account or profile on that network, with no link text. Here’s an example:

<div class="twitter">
<a href="http://twitter.com/your-account"></a>

Get your icons or logos ready. Make a sprite of the original and hover image. Add this CSS to your controlling stylesheet:

.twitter a {
width: 32px;
height: 32px;
display: block;
background: url(images/twitter.png) no-repeat;
cursor: pointer;

.twitter a:hover {
background-position: 0 -42px;

Set the width and height to the correct dimensions if your image differs in size from mine. Next make sure the hover image shows correctly on mouseover. The above should work fine with a 32px square logo and 10px of space between the two.


To see what this looks like before implementing on your own site, have a look at the


If you liked this, why not share it with your friends? I’d appreciate it!

Get this delivered to your inbox!

It's quick, free, and painless.


  1. Dude. Good to see you alive ‘n’ kicking here. Solid tutorial here with top-notch standards. As usual. 😉

  2. How long did it take u to publish “Handle Your Social Network Links Like
    A Pro”? It possesses a lot of very good knowledge. Appreciate it ,Brooke

  3. You are so awesome! I don’t suppose I’ve truly read through anything like this
    before. So nice to find someone with original thoughts on this subject.
    Really.. many thanks for starting this up. This website is something that
    is required on the web, someone with some originality!

  4. What’s up everybody, here every one is sharing these know-how, therefore it’s
    fastidious to read this webpage, and I used to go to
    see this blog daily.

  5. Доброго времени суток 🙂
    Актуально приобреать akki для avito ?

    Я занимаюсь покупкой недвижимости хотелось бы знать ваше мнение!

  6. Helpful posts. Regards.
    overseas pharmacies

Leave a Reply to Anonymous Cancel reply