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!

Get this delivered to your inbox!

It's quick, free, and painless.

Comments

  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. You can learn a lot from these consultants for the management of your business and the way of solving the operational problems.
    For instance, there are still classified ads that are free to use both
    for consumers and advertisers. It’s crucial that you get assurance and rely upon them early on
    during your dialogues.

  6. It’s an awesome piece of writing in favor of all the web viewers; they will get benefit from it I am sure.

Speak Your Mind

*