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>
</div>

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.

Complete!

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

Demo

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