DesignBash

web magazine and more…

CSS Link Style – A Quick Look

Without links the internet would be nothing. It’s quite literally the fabric that holds the net together. So I thought I would write this quick post with the idea of looking at some various link styles. I often find myself looking to others for inspiration, especially when it comes to link styling. For some reason I’ve always had a hard time coming up with different styles and I always seem to end up with a really boring look. So here are some various link styles that I’ve found scattered around the internet…

Smashing Magazine Footer Links

Smashing Magazine Link Style

Taken from the footer of Smashing Magazine

Smashing Magazine’s current site (Jan 2010) has some really classic links located in the footer. They are clean, subdued, and are missing their text-decoration (the underline).

Nettuts and the Block Link

Nettuts Block Links Looking at another footer, we can see an example of some stylish block links. I initially did not enjoy these links, but for some reason they’ve really grown on me over the last few months. I’ve even come to enjoy how they are all different widths, something that I would have hated in my earlier days.

 

The Happy Cog Header

Header Links Styles

One of my favorite sites, so I couldn’t leave them out. Happy Cog uses the traditional underlined link in their main navigation, with a block link hover effect. While it seems that underlines have become less popular lately, I think they provide users with instant recognizable links.

A List Apart General Links

List Apart Links

I wanted to throw this in here because I really enjoy the hover effect on A List Apart. They use a background color AND an underline.

Anyways, I’ll be adding to this list as I find more interesting links. I know it’s a little trivial, but things like this are the bread and butter of a well crafted site. In the meantime, answer this scientific poll:

[poll id=”2″]

posted by admin in Inspiration and have No Comments

Place your comment

Please fill your data and comment below.
Name
Email
Website
Your comment