Over a million developers have joined DZone.

5 Simple Ways To Improve Links

DZone 's Guide to

5 Simple Ways To Improve Links

· Web Dev Zone ·
Free Resource

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?


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}