5 Simple Ways To Improve Links

Changing colors and underline links on hover is something that you would do on every project. This is a common way to style hyperlinks but it could become boring if you use only color and text-decoration styles. Link colors are always going to be a part of color schema so nothing new here. Here are some tips on how to do more than just color your links.

1. Border-bottom

Don't use text-decoration style. You can do better. Use border-bottom instead. Wonder why? Well, border bottom would be shown UNDER links, it won't strikes through the "y" letter, which looks pretty ugly. Also you can play with different border styles. You can have dashed or dotted border. Take a look at the links in my posts, for example. Doesn't that look more funny? Here is an example:

a { border-bottom: dashed 1px #000; }
a:hover { border-bottom: solid 1px #000; } 

2. Background color

You can emphasize links by setting a different color for background. There are two cases when you can set the background color. You can set it on hover, like the links in my sidebar. This is very handy when you have lists like those in the sidebar. You can also set permanent background color in order to emphasize links even more. Take WebDesignerWall for example. Links have that pastel yellow background (image in this case) which make them more emphasized.

a { background-color: #dcdcdc; } 

3. Links with icons

Yes, you can add an icon to your link and make it even more emphasized. This one is pretty simple:

a { background: #fff url('icon.png') no-repeat center left; }

You can also show icon only on hover, or use grayed icons in normal state and colored on hover. Play with it.

4. Capitalize letters

If you really want to have fun with links you can try this one. Capitalize letters on hover. Simple as this:

a:hover { text-transform: uppercase; } 

5. Animate links

If you think this one is too much, you might be wrong. Animating links can be actually awesome. Take link nudging with jQuery, for example. I really like this effect, and will use it on my blog. And guess what? Like everything you do with jQuery this one is as simple as this:

$(document).ready(function() {  
    $('a.nudge').hover(function() {
        $(this).animate({ paddingLeft: '20px' }, 400);  
    }, function() {
        $(this).animate({ paddingLeft: 0 }, 400);  
    }); 
});

So, what do you think? Do you use some other ways to make links richer?

Janko started programming in 1989 working in Clipper ’87 and dBase III+ database. From 1991 to the end of 2002 he was envolved in various projects as a freelancer going through requirements analysis, documenting, development, training and other phases. From 2002 he began using Microsoft technologies intensively and worked on large number of projects in several companies. Currently he is working as a senior software developer and develops solutions using cutting edge technologies. Janko is a DZone MVB and is not an employee of DZone and has posted 11 posts at DZone. You can read more from them at their website.